Álvaro González Álvaro González - 24 days ago 15
jQuery Question

Modify Datepicker translations on runtime

I'm tweaking an existing jQuery UI 1.10.4 Datepicker to support several languages. I want to use the official translations without modifications so I'm able to upgrade in the future. However, I also need to change some terms or add missing ones.

I'm trying out this:

$.datepicker.regional["es"]["buttonText"] = "Foo!";
$('.is-a-date').each(function(){
$(this).datepicker({
buttonImage: '/img/datepicker.png',
buttonImageOnly: true
});
});


I've verified that
$.datepicker.regional["es"]
contains the new values and
buttonText
is localisable (it works fine if I add it right at
jquery.ui.datepicker-es.js
). Everything is enclosed in a
jQuery(function(){...})
wrapper. But my custom texts do not show up anywhere.

What am I missing? Do I need to reinitialise something?

Answer

After the changes you do to the regional you should register them useing the setDefaults function:

$.datepicker.setDefaults($.datepicker.regional["es"])

Check the next example - the text on the next-month button is changed to "Bar!".

$.datepicker.regional["es"]["buttonText"] = "Foo!";
$.datepicker.regional["es"]["nextText"] = "Bar!";

$.datepicker.setDefaults($.datepicker.regional["es"])

$('.is-a-date').each(function(){
    $(this).datepicker({
        buttonImage: '/img/datepicker.png',
        buttonImageOnly: true
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-es.js"></script>

<input class="is-a-date" />

Comments