如何将jquery-ui datepicker本地化选项转换为coffee脚本？

Question

I am new to both javascript and coffeescript . I am trying to initialize my datepicker to another language.

Given the following snippet in the documentation ...

$(function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});

If I do the following in my .js.coffee file in a Rails 4 app, it doesn't seem to be working.

jQuery ->
    $('#order_expected_delivery_date').datepicker
        dateFormat: 'yy-mm-dd'
        showAnim: 'slideDown'
        minDate: '+3D'
        maxDate: '+1M +3D'
        $.datepicker.regional[ "zh-CN" ] 

Many thanks in advance.

Answer 1

If you look at $.datapicker.regional['zh-CN'] , you'll see something like this:

{
    closeText: ...,
    prevText: ...,
    ...
}

so the values in $.datepicker.regional are objects which hold a set of localized options for the datepicker. That means that your datepicker call really looks like this:

$('#order_expected_delivery_date').datepicker
    dateFormat: 'yy-mm-dd'
    showAnim: 'slideDown'
    minDate: '+3D'
    maxDate: '+1M +3D'
    { closeText: '...', prevText: '...', ... }

and that is interpreted as two arguments to datepicker :

$('#order_expected_delivery_date').datepicker({
  dateFormat: 'yy-mm-dd', ...
}, {
  closeText: '...', ...
})

and the localization options are ignored.

Probably the easiest thing to do is to merge the localization options into your options.

    options = $.extend({ }, $.datapicker.regional['zh-CN'], 
        dateFormat: 'yy-mm-dd'
        showAnim: 'slideDown'
        minDate: '+3D'
        maxDate: '+1M +3D'
    )
    $('#order_expected_delivery_date').datepicker options

I use $.extend since you're already using jQuery. I also put the standard localized options before your options since dateFormat might be provided by the localized options and you want to use your own.

You could also use the option method like the example does:

$('#order_expected_delivery_date').datepicker 'option', $.datepicker.regional['zh-CN']

but that might overwrite your dateFormat so some care might be needed.