MooTools Date Picker default format

Question

I am using the datepicker from mootools and trying to have it localised format depending on the users location.

For example:

08/15/13 //American
15.08.13 //English

The documentation states that it should change by default format: (*string*, defaults to the default localized format)

But using this code:

    window.addEvent('domready', function(){
    new Picker.Date($$('input'), {
        timePicker: true,
        positionOffset: {x: 5, y: 0},
        pickerClass: 'datepicker_bootstrap',
        useFadeInOut: !Browser.ie
    });
});

It always uses the American format 08/15/13 (Month first).

I am testing by changing my Time Zone set in windows 7 Date and Time

Answer 1

I don't think DatePicker does that "out of the box". I am not sure there is a water-proof way to get user location or language codes in client side scripts.

I just tried :

var language = window.navigator.userLanguage || window.navigator.language;
console.log(language);

and got "sv" in Chrome and "en-GB" in Firefox, in the same machine.

I got about the same using php / HTTP-request header. Thought about getting the info from server-side. This question points HTTP_ACCEPT_LANGUAGE as the best way, BUT:

$_SERVER["HTTP_ACCEPT_LANGUAGE"] // gives me:
sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4 //in chrome
en-gb,en;q=0.5 //in firefox

If you look in the DatePicker.js file you have in the first lines:

---
name: Locale.en-US.DatePicker
description: English Language File for DatePicker
authors: Arian Stolwijk
requires: [More/Locale]
provides: Locale.en-US.DatePicker
...

This gives me a feeling that it is set to en-US. It will work if you set it manually though.

My suggestion is to follow Dimitar's suggestion and set it manually with Locale.use(). If you add for example Locale.use('sv-SE'); before you call DatePicker you will get date in format yyyy-mm-dd.

I did a script to read the client-side language to try to make it dynamical. It works but It's not tested. This assigns a language comparing the Mootools Locale.list() and the browser/javascript answer I posted above:

var language = window.navigator.userLanguage || window.navigator.language;
console.log(language); //gives the results I wrote above (sv/en-GB resp. Chrome/FF)
var list = Locale.list().length;
for (var i = 0; i < list; i++) {
    if (Locale.list()[i] == language) { //check if it's a full match
        Locale.use(language);
    } else { 
// go for the first part of the "sv-SE" and find a match
// this is a compromise, it gets the right language but might miss the right country
        var langArray = language.split('-');
        var locArray = Locale.list()[i].split('-');
        for (var k = 0; k < list; k++) {
            if (langArray[0] == locArray[0]) {
                Locale.use(Locale.list()[i]);
            }
        }
    }
}
console.log(Locale.getCurrent().name); // gives sv-SE/en-GB resp. Chrome/FF
new Picker.Date($$('input'), { 
// etc...

If you thinks it's useful you can fine-tune it... Fiddle here