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...?

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...?

• javascript
• jquery
• jquery-ui
• datepicker
• date-format

• what do you mean by browser language? – Praveen Commented Apr 18, 2014 at 11:59
• in "chrome://settings/languages", if language is English (United Kingdom) or "en-GB" then date format should be "dd/mm/yyyy" in Jquery DatePicker and if "United States" then "mm/dd/yyyy", I have to set date format based on Browser Preferred or Selected Language... – Sohail xIN3N Commented Apr 18, 2014 at 12:04
• You can't reliably tell the format that a user monly uses for dates from browser settings or values. Far better to use an unambiguous format (e.g. use a month name, not number) or let users specify the format they wish to use. – RobG Commented Apr 18, 2014 at 12:29

2 Answers 2

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.

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.