CODEWITHSUNDEEP
jqueryjquery-ui
Álvaro González
Álvaro González

Reputation: 146460

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?

Upvotes: 0

Views: 46

Answers (1)

Dekel
Dekel

Reputation: 62566

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" />

Upvotes: 1

Related Questions