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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Configuration Options

Name: tessl/npm-jquery-datetimepicker
Author: tessl

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

Capabilities

Display Options

Control the visual appearance and layout of the datetimepicker.

interface DisplayOptions {
    /** Date/time format string (default: 'Y/m/d H:i') */
    format?: string;
    /** Time-only format string (default: 'H:i') */
    formatTime?: string;
    /** Date-only format string (default: 'Y/m/d') */
    formatDate?: string;
    /** Enable date picker (default: true) */
    datepicker?: boolean;
    /** Enable time picker (default: true) */
    timepicker?: boolean;
    /** Display inline instead of popup (default: false) */
    inline?: boolean;
    /** CSS theme class (default: '') */
    theme?: string;
    /** Additional CSS classes (default: '') */
    className?: string;
    /** Right-to-left layout (default: false) */
    rtl?: boolean;
    /** Show week numbers (default: false) */
    weeks?: boolean;
    /** Use 12-hour format (default: false) */
    hours12?: boolean;
}

Usage Examples:

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

// Time picker only with 12-hour format
$('#timepicker').datetimepicker({
    datepicker: false,
    timepicker: true,
    format: 'h:i A',
    hours12: true
});

// Inline date picker with weeks
$('#inline').datetimepicker({
    inline: true,
    weeks: true,
    theme: 'dark'
});

Behavior Options

Control how the datetimepicker responds to user interactions.

interface BehaviorOptions {
    /** Initial value (default: '') */
    value?: string;
    /** Time step in minutes (default: 60) */
    step?: number;
    /** Close on date selection (default: false) */
    closeOnDateSelect?: boolean;
    /** Close on time selection (default: true) */
    closeOnTimeSelect?: boolean;
    /** Close when clicking outside (default: true) */
    closeOnWithoutClick?: boolean;
    /** Close when clicking input (default: true) */
    closeOnInputClick?: boolean;
    /** Open on input focus (default: true) */
    openOnFocus?: boolean;
    /** Input masking (default: false) */
    mask?: boolean | string;
    /** Validate on blur (default: true) */
    validateOnBlur?: boolean;
    /** Allow empty values (default: true) */
    allowBlank?: boolean;
    /** Enable scrolling for month navigation (default: true) */
    scrollMonth?: boolean;
    /** Enable scrolling for time selection (default: true) */
    scrollTime?: boolean;
    /** Enable scrolling on input (default: true) */
    scrollInput?: boolean;
    /** Lazy initialization (default: false) */
    lazyInit?: boolean;
    /** Initialize with current time (default: true) */
    initTime?: boolean;
    /** Enable default selection (default: true) */
    defaultSelect?: boolean;
    /** Enter key acts as tab (default: true) */
    enterLikeTab?: boolean;
}

Usage Examples:

// 15-minute intervals, closes on selection
$('#meeting-time').datetimepicker({
    step: 15,
    closeOnTimeSelect: true,
    closeOnDateSelect: true
});

// With input masking
$('#masked-input').datetimepicker({
    mask: '9999/19/39 29:59',
    format: 'Y/m/d H:i'
});

// Don't open on focus, manual control
$('#manual-picker').datetimepicker({
    openOnFocus: false,
    closeOnInputClick: false
});

Date and Time Constraints

Set minimum and maximum values and restrict selectable dates/times.

interface ConstraintOptions {
    /** Minimum selectable date */
    minDate?: Date | string | boolean;
    /** Maximum selectable date */
    maxDate?: Date | string | boolean;
    /** Minimum selectable time */
    minTime?: Date | string | boolean;
    /** Maximum selectable time */
    maxTime?: Date | string | boolean;
    /** Minimum selectable datetime */
    minDateTime?: Date | string | boolean;
    /** Maximum selectable datetime */
    maxDateTime?: Date | string | boolean;
    /** Default time when date is selected */
    defaultTime?: string | boolean;
    /** Default date when time is selected */
    defaultDate?: Date | string | boolean;
    /** Array of allowed time values */
    allowTimes?: string[];
    /** Array of allowed dates */
    allowDates?: (Date | string)[];
    /** Regular expression for allowed dates */
    allowDateRe?: RegExp | string;
    /** Array of disabled dates */
    disabledDates?: (Date | string)[];
    /** Array of disabled weekdays (0=Sunday) */
    disabledWeekDays?: number[];
    /** Starting year for year selector (default: 1950) */
    yearStart?: number;
    /** Ending year for year selector (default: 2050) */
    yearEnd?: number;
    /** Starting month (0-11, default: 0) */
    monthStart?: number;
    /** Ending month (0-11, default: 11) */
    monthEnd?: number;
    /** Year offset for display (default: 0) */
    yearOffset?: number;
}

Usage Examples:

// Business hours only
$('#business-hours').datetimepicker({
    datepicker: false,
    allowTimes: [
        '09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
        '12:00', '12:30', '13:00', '13:30', '14:00', '14:30',
        '15:00', '15:30', '16:00', '16:30', '17:00'
    ]
});

// Date range restriction
$('#date-range').datetimepicker({
    minDate: new Date(),
    maxDate: '2024-12-31',
    disabledWeekDays: [0, 6] // Disable weekends
});

// Specific allowed dates
$('#allowed-dates').datetimepicker({
    allowDates: ['2023-12-25', '2023-12-26', '2024-01-01']
});

Highlighting Options

Highlight specific dates, periods, or weekends.

interface HighlightingOptions {
    /** Dates to highlight with optional description and style */
    highlightedDates?: (Date | string | HighlightedDate)[];
    /** Date periods to highlight */
    highlightedPeriods?: HighlightedPeriod[];
    /** Custom weekend days (default: []) */
    weekends?: number[];
}

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

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

Usage Examples:

// Highlight important dates
$('#events').datetimepicker({
    highlightedDates: [
        '2023-12-25,Christmas,color:red;',
        '2024-01-01,New Year,color:blue;'
    ]
});

// Highlight vacation periods
$('#vacation').datetimepicker({
    highlightedPeriods: [
        'start:2023-12-20,end:2024-01-05,desc:Holiday Period,style:background:yellow;'
    ]
});

Appearance Options

Control visual elements and layout.

interface AppearanceOptions {
    /** Show today button (default: true) */
    todayButton?: boolean;
    /** Show previous button (default: true) */
    prevButton?: boolean;
    /** Show next button (default: true) */
    nextButton?: boolean;
    /** Show apply button (default: false) */
    showApplyButton?: boolean;
    /** CSS class for next button (default: 'xdsoft_next') */
    next?: string;
    /** CSS class for previous button (default: 'xdsoft_prev') */
    prev?: string;
    /** Time item height in time picker (default: 25) */
    timeHeightInTimePicker?: number;
    /** Show time picker scrollbar (default: true) */
    timepickerScrollbar?: boolean;
    /** Enable month change spinner (default: true) */
    monthChangeSpinner?: boolean;
    /** First day of week (0=Sunday, default: 0) */
    dayOfWeekStart?: number;
    /** Hide copyright notice (default: true) */
    withoutCopyright?: boolean;
    /** Invert button behavior (default: false) */
    inverseButton?: boolean;
}

Usage Examples:

// Minimal interface
$('#minimal').datetimepicker({
    todayButton: false,
    prevButton: false,
    nextButton: false,
    timepickerScrollbar: false
});

// Monday first, with apply button
$('#european').datetimepicker({
    dayOfWeekStart: 1,
    showApplyButton: true
});

Layout Options

Control positioning and container behavior.

interface LayoutOptions {
    /** Use fixed positioning (default: false) */
    fixed?: boolean;
    /** Keep picker inside parent element (default: false) */
    insideParent?: boolean;
    /** Parent container selector (default: 'body') */
    parentID?: string;
    /** Touch move threshold for mobile (default: 5) */
    touchMovedThreshold?: number;
    /** Element ID for picker (default: '') */
    id?: string;
    /** Inline styles for picker (default: '') */
    style?: string;
}

Usage Examples:

// Fixed positioning in modal
$('#modal-date').datetimepicker({
    fixed: true,
    parentID: '#modal-container'
});

// Keep inside specific container
$('#contained').datetimepicker({
    insideParent: true,
    parentID: '#form-container'
});

Advanced Options

Advanced configuration for specialized use cases.

interface AdvancedOptions {
    /** Time rounding method: 'round', 'ceil', 'floor' (default: 'round') */
    roundTime?: 'round' | 'ceil' | 'floor';
    /** Custom function to determine if a day should be shown */
    beforeShowDay?: (date: Date) => [boolean, string?, string?];
    /** Custom week number calculation */
    onGetWeekOfYear?: (date: Date) => number;
    /** Whether picker is initially opened (default: false) */
    opened?: boolean;
    /** Start date for relative calculations */
    startDate?: Date | string | boolean;
}

Usage Examples:

// Custom day rendering
$('#custom-days').datetimepicker({
    beforeShowDay: function(date) {
        var day = date.getDay();
        if (day === 0 || day === 6) {
            return [false, 'weekend', 'Weekend not available'];
        }
        return [true, '', ''];
    }
});

// Always round time up
$('#round-up').datetimepicker({
    roundTime: 'ceil',
    step: 15
});