or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-options.mdevent-handling.mdglobal-api.mdindex.mdinstance-methods.mdinternationalization.mdplugin-interface.md
tile.json

tessl/npm-jquery-datetimepicker

jQuery plugin for date and time selection combining both date picker and time picker functionality with extensive customization and internationalization support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jquery-datetimepicker@2.5.x

To install, run

npx @tessl/cli install tessl/npm-jquery-datetimepicker@2.5.0

index.mddocs/

jQuery DateTimePicker

jQuery DateTimePicker is a comprehensive jQuery plugin that combines both date picker and time picker functionality into a single, customizable widget. It provides advanced features including internationalization support for 40+ languages, flexible date/time formatting, validation, and extensive customization options for web applications.

Package Information

  • Package Name: jquery-datetimepicker
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install jquery-datetimepicker
  • Dependencies: jQuery (>= 1.7.2), jquery-mousewheel (>= 3.1.13), php-date-formatter (^1.3.4)

Core Imports

Browser (from CDN or local files):

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css">
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

Node.js/Webpack:

require('jquery-datetimepicker');
require('jquery-datetimepicker/build/jquery.datetimepicker.min.css');

ES6 Modules:

import 'jquery-datetimepicker';
import 'jquery-datetimepicker/build/jquery.datetimepicker.min.css';

Basic Usage

// Basic initialization
$('#datetimepicker').datetimepicker();

// Date picker only
$('#datepicker').datetimepicker({
    timepicker: false,
    format: 'd/m/Y'
});

// Time picker only
$('#timepicker').datetimepicker({
    datepicker: false,
    format: 'H:i'
});

// With options
$('#datetime').datetimepicker({
    format: 'Y-m-d H:i',
    minDate: '2023-01-01',
    maxDate: '2024-12-31',
    step: 30
});

Architecture

jQuery DateTimePicker is built around several key components:

  • Plugin Method: $.fn.datetimepicker() for initialization and method calls
  • Static API: $.datetimepicker namespace for global configuration and utilities
  • Instance Methods: Methods available on individual picker instances
  • Configuration System: Extensive options for customization and localization
  • Event System: Callbacks and triggers for user interactions
  • Internationalization: Built-in support for 40+ locales with custom i18n options

Capabilities

Core Plugin Interface

Main jQuery plugin method for initialization and control. Supports both options-based initialization and string-based method calls.

function datetimepicker(options?: DateTimePickerOptions): JQuery;
function datetimepicker(method: 'show' | 'hide' | 'toggle' | 'destroy' | 'reset' | 'validate'): JQuery;
function datetimepicker(method: string, ...args: any[]): any;

Plugin Interface

Configuration Options

Comprehensive configuration system with 80+ options for customizing appearance, behavior, and functionality.

interface DateTimePickerOptions {
    // Display options
    format?: string;
    formatTime?: string;
    formatDate?: string;
    datepicker?: boolean;
    timepicker?: boolean;
    inline?: boolean;
    
    // Behavior options
    closeOnDateSelect?: boolean;
    closeOnTimeSelect?: boolean;
    openOnFocus?: boolean;
    step?: number;
    
    // Date/time constraints
    minDate?: Date | string | boolean;
    maxDate?: Date | string | boolean;
    minTime?: Date | string | boolean;
    maxTime?: Date | string | boolean;
    
    // And many more...
}

Configuration Options

Global API

Static methods and constants available on the $.datetimepicker namespace for global configuration and utilities.

interface DateTimePickerStatic {
    setLocale(locale: string): void;
    setDateFormatter(dateFormatter: string | DateFormatter): void;
    
    // Standard format constants
    readonly RFC_2822: string;
    readonly ATOM: string;
    readonly ISO_8601: string;
    readonly RFC_822: string;
    readonly RFC_850: string;
    readonly RFC_1036: string;
    readonly RFC_1123: string;
    readonly RSS: string;
    readonly W3C: string;
}

// Available via $.fn.datetimepicker.defaults
interface DateTimePickerDefaults {
    defaults: DateTimePickerOptions;
}

Global API

Instance Methods

Methods available on individual datetimepicker instances for programmatic control and value access.

interface DateTimePickerInstance {
    getValue(): Date;
    setOptions(options: DateTimePickerOptions): void;
}

Instance Methods

Internationalization

Built-in internationalization support with 40+ pre-configured locales and custom i18n options.

interface InternationalizationOptions {
    i18n?: {
        [locale: string]: {
            months: string[];
            dayOfWeekShort: string[];
            dayOfWeek: string[];
        };
    };
}

Internationalization

Event Handling

Comprehensive event system with callbacks for user interactions and picker state changes.

interface EventCallbacks {
    onShow?: (currentTime: Date, input: HTMLInputElement) => boolean | void;
    onClose?: (currentTime: Date, input: HTMLInputElement) => boolean | void;
    onSelectDate?: (currentTime: Date, input: HTMLInputElement) => void;
    onSelectTime?: (currentTime: Date, input: HTMLInputElement) => void;
    onChangeMonth?: (currentTime: Date, input: HTMLInputElement) => void;
    onChangeYear?: (currentTime: Date, input: HTMLInputElement) => void;
    onChangeDateTime?: (currentTime: Date, input: HTMLInputElement) => void;
    onGenerate?: (currentTime: Date, input: HTMLInputElement) => void;
}

Event Handling

Types

interface DateTimePickerOptions extends EventCallbacks, InternationalizationOptions {
    // Core options
    value?: string;
    format?: string;
    formatTime?: string;
    formatDate?: string;
    
    // Display options
    datepicker?: boolean;
    timepicker?: boolean;
    inline?: boolean;
    theme?: string;
    className?: string;
    rtl?: boolean;
    weeks?: boolean;
    
    // Behavior options
    step?: number;
    closeOnDateSelect?: boolean;
    closeOnTimeSelect?: boolean;
    closeOnWithoutClick?: boolean;
    closeOnInputClick?: boolean;
    openOnFocus?: boolean;
    mask?: boolean | string;
    validateOnBlur?: boolean;
    allowBlank?: boolean;
    
    // Date/time constraints
    minDate?: Date | string | boolean;
    maxDate?: Date | string | boolean;
    minTime?: Date | string | boolean;
    maxTime?: Date | string | boolean;
    minDateTime?: Date | string | boolean;
    maxDateTime?: Date | string | boolean;
    defaultTime?: string | boolean;
    defaultDate?: Date | string | boolean;
    
    // Advanced options
    allowTimes?: string[];
    allowDates?: (Date | string)[];
    allowDateRe?: RegExp | string;
    disabledDates?: (Date | string)[];
    disabledWeekDays?: number[];
    highlightedDates?: (Date | string | HighlightedDate)[];
    highlightedPeriods?: HighlightedPeriod[];
    weekends?: number[];
    
    // Time picker options
    hours12?: boolean;
    timeHeightInTimePicker?: number;
    timepickerScrollbar?: boolean;
    
    // Year/month options
    yearStart?: number;
    yearEnd?: number;
    monthStart?: number;
    monthEnd?: number;
    yearOffset?: number;
    
    // Appearance options
    todayButton?: boolean;
    prevButton?: boolean;
    nextButton?: boolean;
    showApplyButton?: boolean;
    next?: string;
    prev?: string;
    
    // Advanced behavior
    scrollMonth?: boolean;
    scrollTime?: boolean;
    scrollInput?: boolean;
    lazyInit?: boolean;
    initTime?: boolean;
    defaultSelect?: boolean;
    enterLikeTab?: boolean;
    
    // Layout options
    fixed?: boolean;
    insideParent?: boolean;
    parentID?: string;
    
    // Custom functions
    beforeShowDay?: (date: Date) => [boolean, string?, string?];
    onGetWeekOfYear?: (date: Date) => number;
    
    // Misc options
    withoutCopyright?: boolean;
    inverseButton?: boolean;
    dayOfWeekStart?: number;
}

interface HighlightedDate {
    date: Date;
    desc?: string;
    style?: string;
}

interface HighlightedPeriod {
    start: Date | string;
    end: Date | string;
    desc?: string;
    style?: string;
}

interface DateFormatter {
    parseDate(dateString: string, format: string): Date;
    formatDate(date: Date, format: string): string;
}