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

Internationalization

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

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

Capabilities

Global Locale Setting

Set the global locale that applies to all datetimepicker instances.

/**
 * Set global locale for all instances
 * Available via $.datetimepicker.setLocale()
 */
$.datetimepicker.setLocale(locale: string): void;

Usage Examples:

// Set German locale globally
$.datetimepicker.setLocale('de');

// All new instances will use German
$('#date1').datetimepicker(); // German month/day names
$('#date2').datetimepicker(); // German month/day names

// Switch to French
$.datetimepicker.setLocale('fr');
$('#date3').datetimepicker(); // French month/day names

Custom Internationalization

Override or customize locale strings for specific instances.

interface InternationalizationOptions {
    /** Custom internationalization strings */
    i18n?: {
        [locale: string]: LocaleDefinition;
    };
}

interface LocaleDefinition {
    /** Full month names (12 items) */
    months: string[];
    /** Short day names (7 items, starting with Sunday) */
    dayOfWeekShort: string[];
    /** Full day names (7 items, starting with Sunday) */
    dayOfWeek: string[];
}

Usage Examples:

// Custom German locale
$('#custom-german').datetimepicker({
    i18n: {
        de: {
            months: [
                'Januar', 'Februar', 'März', 'April',
                'Mai', 'Juni', 'Juli', 'August',
                'September', 'Oktober', 'November', 'Dezember'
            ],
            dayOfWeekShort: [
                'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'
            ],
            dayOfWeek: [
                'Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
                'Donnerstag', 'Freitag', 'Samstag'
            ]
        }
    }
});

// Custom English locale with abbreviated names
$('#short-english').datetimepicker({
    i18n: {
        en: {
            months: [
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ],
            dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            dayOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        }
    }
});

Supported Locales

Pre-configured locales available out of the box.

type SupportedLocale = 
    | 'ar'     // Arabic
    | 'bg'     // Bulgarian
    | 'bs'     // Bosnian
    | 'ca'     // Catalan
    | 'ch'     // Chinese
    | 'cs'     // Czech
    | 'da'     // Danish
    | 'de'     // German
    | 'el'     // Greek
    | 'en'     // English (default)
    | 'en-GB'  // English (UK)
    | 'es'     // Spanish
    | 'et'     // Estonian
    | 'eu'     // Basque
    | 'fa'     // Persian/Farsi
    | 'fi'     // Finnish
    | 'fr'     // French
    | 'gl'     // Galician
    | 'he'     // Hebrew
    | 'hr'     // Croatian
    | 'hu'     // Hungarian
    | 'id'     // Indonesian
    | 'is'     // Icelandic
    | 'it'     // Italian
    | 'ja'     // Japanese
    | 'ko'     // Korean
    | 'kr'     // Korean (alternative)
    | 'lt'     // Lithuanian
    | 'lv'     // Latvian
    | 'mk'     // Macedonian
    | 'mn'     // Mongolian
    | 'nl'     // Dutch
    | 'no'     // Norwegian
    | 'pl'     // Polish
    | 'pt'     // Portuguese
    | 'pt-BR'  // Portuguese (Brazil)
    | 'ro'     // Romanian
    | 'ru'     // Russian
    | 'se'     // Swedish
    | 'sk'     // Slovak
    | 'sl'     // Slovenian
    | 'sq'     // Albanian
    | 'sr-YU'  // Serbian
    | 'sv'     // Swedish (alternative)
    | 'sw'     // Swahili
    | 'th'     // Thai
    | 'tr'     // Turkish
    | 'uk'     // Ukrainian
    | 'vi'     // Vietnamese
    | 'zh'     // Chinese
    | 'zh-TW'; // Chinese (Taiwan)

Usage Examples:

// Spanish locale
$.datetimepicker.setLocale('es');
$('#spanish-date').datetimepicker({
    format: 'd/m/Y'
});

// Russian locale
$.datetimepicker.setLocale('ru');
$('#russian-date').datetimepicker({
    format: 'd.m.Y'
});

// Arabic locale (RTL support)
$.datetimepicker.setLocale('ar');
$('#arabic-date').datetimepicker({
    rtl: true,
    format: 'Y/m/d'
});

Right-to-Left (RTL) Support

Support for right-to-left languages.

interface RTLOptions {
    /** Enable right-to-left layout (default: false) */
    rtl?: boolean;
}

Usage Examples:

// Arabic with RTL layout
$.datetimepicker.setLocale('ar');
$('#arabic-rtl').datetimepicker({
    rtl: true,
    format: 'Y/m/d H:i'
});

// Hebrew with RTL layout
$.datetimepicker.setLocale('he');
$('#hebrew-rtl').datetimepicker({
    rtl: true,
    format: 'd/m/Y'
});

// Persian with RTL layout
$.datetimepicker.setLocale('fa');
$('#persian-rtl').datetimepicker({
    rtl: true,
    timepicker: false
});

Locale-Specific Examples by Region

Common configurations for different regions.

Usage Examples:

// European date format (DD/MM/YYYY)
$.datetimepicker.setLocale('de');
$('#european-date').datetimepicker({
    format: 'd/m/Y H:i',
    dayOfWeekStart: 1 // Monday first
});

// US date format (MM/DD/YYYY)
$.datetimepicker.setLocale('en');
$('#us-date').datetimepicker({
    format: 'm/d/Y h:i A',
    hours12: true,
    dayOfWeekStart: 0 // Sunday first
});

// ISO format with local names
$.datetimepicker.setLocale('fr');
$('#iso-french').datetimepicker({
    format: 'Y-m-d H:i',
    dayOfWeekStart: 1
});

// Asian date formats
$.datetimepicker.setLocale('ja');
$('#japanese-date').datetimepicker({
    format: 'Y年m月d日',
    timepicker: false
});

$.datetimepicker.setLocale('ko');
$('#korean-date').datetimepicker({
    format: 'Y년 m월 d일',
    timepicker: false
});

$.datetimepicker.setLocale('zh');
$('#chinese-date').datetimepicker({
    format: 'Y年m月d日',
    timepicker: false
});

Mixed Locale Usage

Using different locales in the same application.

Usage Examples:

// Store original locale
var originalLocale = 'en';

// Temporarily switch locale for specific picker
$.datetimepicker.setLocale('de');
$('#german-picker').datetimepicker({
    format: 'd.m.Y'
});

// Restore original locale
$.datetimepicker.setLocale(originalLocale);

// Continue with original locale
$('#english-picker').datetimepicker({
    format: 'm/d/Y'
});

// Or use custom i18n without changing global locale
$('#custom-french').datetimepicker({
    i18n: {
        fr: {
            months: [
                'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
                'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
            ],
            dayOfWeekShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            dayOfWeek: [
                'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 
                'Jeudi', 'Vendredi', 'Samedi'
            ]
        }
    }
});

Dynamic Locale Switching

Change locale based on user preferences or context.

Usage Examples:

// Locale switcher
function switchLocale(locale) {
    $.datetimepicker.setLocale(locale);
    
    // Reinitialize all pickers with new locale
    $('.datetimepicker').each(function() {
        var $this = $(this);
        var options = $this.data('datetimepicker-options') || {};
        
        $this.datetimepicker('destroy');
        $this.datetimepicker(options);
    });
}

// Dropdown to switch locale
$('#locale-selector').on('change', function() {
    var selectedLocale = $(this).val();
    switchLocale(selectedLocale);
});

// Detect browser locale
function detectAndSetLocale() {
    var browserLocale = navigator.language || navigator.userLanguage;
    var supportedLocale = browserLocale.split('-')[0]; // Get language part
    
    // Check if locale is supported
    var supportedLocales = ['ar', 'de', 'en', 'es', 'fr', 'it', 'ru', 'zh'];
    if (supportedLocales.includes(supportedLocale)) {
        $.datetimepicker.setLocale(supportedLocale);
    } else {
        $.datetimepicker.setLocale('en'); // Fallback to English
    }
}

// Auto-detect on page load
$(document).ready(function() {
    detectAndSetLocale();
});