CODEWITHSUNDEEP
javascriptjqueryjquery-ui-datepicker
Attila Naghi
Attila Naghi

Reputation: 2686

How to translate jquery ui datepicker in multiple language?

I have multiple stores with multiple languages: en, de, nl, fr etc. I need to translate the jquery datepicker. This is my code:

jQuery(function(){
    region = jQuery('html').attr('lang');// get the lang code
    jQuery("#scheduled_at").datepicker(
        {
        minDate: +3,
        maxDate: "+3M" ,
        dateFormat : 'dd-mm-yy',
        beforeShowDay: jQuery.datepicker.noWeekends,
        firstDay: 1
    });
});

I saw this repo: https://github.com/jquery/jquery-ui/tree/master/ui/i18n with all of the translations, but I don't need all of them. Just a few.

sample of en translations:

/* English/UK initialisation for the jQuery UI date picker plugin. */

/* Written by Stuart. */
( function( factory ) {
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
        define( [ "../widgets/datepicker" ], factory );
    } else {

        // Browser globals
        factory( jQuery.datepicker );
    }
}( function( datepicker ) {

    datepicker.regional[ "en-GB" ] = {
        closeText: "Done",
        prevText: "Prev",
        nextText: "Next",
        currentText: "Today",
        monthNames: [ "January","February","March","April","May","June",
            "July","August","September","October","November","December" ],
        monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
        dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
        dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
        dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ],
        weekHeader: "Wk",
        dateFormat: "dd/mm/yy",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: "" };
    datepicker.setDefaults( datepicker.regional[ "en-GB" ] );

    return datepicker.regional[ "en-GB" ];

} ) );

How can I add the: jQuery.datepicker.regional[region] in my case ? for de, nl,fr and en ?

I see this post: jQuery Datepicker localization , but it is only for ONE language.

Thank you

Upvotes: 2

Views: 8685

Answers (1)

Skatt
Skatt

Reputation: 402

Then you can use:

$( selector ).datepicker( $.datepicker.regional[ "en" ] );
$( selector ).datepicker( $.datepicker.regional[ "de" ] );
$( selector ).datepicker( $.datepicker.regional[ "nl" ] );
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

Something dynamic could be using a jQuery variable:

var languages = "en","fr";

 $( selector ).datepicker( $.datepicker.regional[ +languages+ ] );

Upvotes: 0

Related Questions