Question

I’d like to do a jQuery UI datepicker widget that has both month/year menu as seen at datepicker: jQuery UI, but it also needs to be localized, as seen at datepicker jQuery UI:localization.

I’m not sure if both can be done together. I have not been able to get it to work. If I add the localization code, I do see the calendar localized properly, but I lose the month/year menus.

See JsFiddle for a working sample of the i18n. if you comment out the i18n line:

$( "#dob" ).datepicker( $.datepicker.regional[ "ar" ] );

… then you’ll see the month/year menus work properly.

Does anybody know of a way to get these both working together in a single widget?

Answer 1

First thing to understand is that the first time you call the datepicker function whatever you pass to it will be used to initialize the widget. After that, each additional call to datepicker will be used to call methods or set options.

In your jsfiddle, try:

$( document ).ready( function() {
    $( "#dob" ).datepicker({
        changeMonth: true,
        changeYear: true
    }).datepicker("option", $.datepicker.regional[ "ar" ]);
});​

In this manner we are initializing the datepicker with the options for changeMonth and changeYear. On our next call we can update an option, making it regional.