How to set Jquery UI Datepicker date format based on browser language?

Question

I want to set Jquery UI DatePicker date format from browser language, for example if "English (United Kingdom)" in Google Chrome is on top in Language and input settings... (chrome://settings/languages) then date format would be dd/mm/yyyy and if "English (United States)" is on the top of the list then date format should be mm/dd/yyyy. Is there any way to set Date Format from Browser Language in Chrome, Firefox and IE...?

Answer 1

In your case I would suggest to check the language like

var userLang = navigator.language || navigator.userLanguage; 
// detect browser language but not a decent one 
if (userLang === "en-US") {
  $( ".selector" ).datepicker( "option", "dateFormat", "mm/dd/yyyy" );
} else {
  $( ".selector" ).datepicker( "option", "dateFormat", "dd/mm/yyyy" );
}

Update:

I was looking into localization of jQuery datepicker, and here is a nice discussion and a nice plugin for it.

jQuery-localization, which detects the language and loads the respective regional language for it

$.localise('js/jquery.ui.datepicker');

Note: By default, it looks at the locale set for the browser and requests localisations of the specified package based on that. For example, if the locale is Portuguese/Brazil (pt-BR), it will load js/jquery.ui.datepicker-pt.js and js/jquery.ui.datepicker-pt-BR.js.

Answer 2

This is how it's done in the current project I'm working on. Not sure if it's the best approach as I believe there are language files available in jQuery UI, however ...

var cfg = {
    container: '.datepicker',
    regional: {
        nl: {
            closeText: 'Sluiten',
            prevText: '←',
            nextText: '→',
            currentText: 'Vandaag',
            monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
            monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
            dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
            dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
            dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
            weekHeader: 'Wk',
            dateFormat: 'dd-mm-yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        }
    }
};

// extracted activation function
$.datepicker.regional = $.extend({}, $.datepicker.regional, cfg.regional);
$.datepicker.setDefaults($.datepicker.regional.nl);
this.datepicker.datepicker();

So you can add languages in the cfg object and choose a custom format. Only thing left to do is make the language, passed to datepicker(), dynamic. Perhaps from the URL, cookie, session, server variable, ... depending on how your project uses languages.

Hope it helps.