Localization not working in jQuery UI datePicker

Question

I have performed several modifications to the UI of a web application I am maintaining. These include fetching JS libraries from NuGet and aligning them to a more recent version than the previous.

The old version, running jQuery 1.8.2 and jQuery UI 1.8.24 (customized, minified, re-beautified by Firebug and shown to you) runs a perfectly localized DatePicker, including format dd/MM/yyyy which is the format of data wired into the text boxes by MVC pages.

Now I have fetched jQuery 1.11.2 and jQuery UI 1.11.2, presuming that everything will continue to work as expected.

Nope.

The DatePicker are still initialized as follows:

<script type="text/javascript">
       $(function() {
            $.datepicker.setDefaults($.extend({ showMonthAfterYear: false }, $.datepicker.regional['']));
            $(".datePicker").datepicker($.datepicker.regional['it']);
            $('.datePicker').datepicker('option', 'changeMonth', true);
            $('.datePicker').datepicker('option', 'changeYear', true);
            $("#locale").change(function() {
                $('.datePicker').datepicker('option', $.extend({ showMonthAfterYear: false },
                    $.datepicker.regional[$(this).val()]));
            });
        });
</script>

And the textboxes are

<input type="text" class="datePicker" id="date_begin" name="pDateBegin" value="<%=Some.Data %>" readonly="readonly"/>
<input type="text" class="datePicker" id="date_end" name="pDateEnd" value="<%=Some.Data %>" readonly="readonly"/>

Briefly, the old application shows a well-localized calendar and accepts dd/MM/yyyy dates. The new refactored application doesn't obviously accept dates as 24/02/2015 as valid dates, leaving the textbox blank. And that version shows an English localized calendar while the JS code requires it regional. From Firebug console on the old application I can see the value of $.datepicker.regional['it'] correctly, and it's empty in the new application.

I wanted to track down, to solve the problem myself, where in the code the IT regional is defined, but searching for Chiudi (it message for "Close") doesn't find anything. It looks like the language comes from the mistery.

The old application includes the following files (in Firebug's order):

jquery.form.js
jquery-1.8.2-min.js
jquery-ui-1.8.24.custom.min.js (linked in the paste, no result for the magic word Chiudi)
superfish.js
Custom app's JS scripts (included in the new application and not overriding datepicker anyway)
MicrosoftAjax.js
MicrosoftMVC.js
jquery.tablesorter.js
jquery.tablesorter.pager.js

An override of datepicker's regional is not even found in the ASPX code, which I haven't changed yet in the page I'm examining.

The question is

How to add languages to the standard NuGet distribution of jQuery UI?

http://jqueryui.com/datepicker/#localization - Check it out this demo & you can download language file from here: https://github.com/jquery/jquery-ui/tree/master/ui/i18n — Ram Khumana, Feb 11 '15 at 10:59

score 1 · Accepted Answer · answered Feb 11 '15 at 11:04

1

You can include this code :

<script type="text/javascript"
        src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-fr.js">
</script>

http://jqueryui.com/datepicker/#localization - Check it out this demo & you can download language file from here: https://github.com/jquery/jquery-ui/tree/master/ui/i18n

answered Feb 11 '15 at 11:04

Ram Khumana

844
6
14

That's great. What I didn't tell is that I can't use a CDN on this project only because the app (may) run at a *large-american-bank-that-has-been-recently-hacked-leaking-personal-data* xD with workstations behind heavy firewalling/proxying, but the answer is OK for the general case. One could actually both install the NuGet package (below) and use Web Optimization to add a CDN reference too – usr-local-ΕΨΗΕΛΩΝ Feb 11 '15 at 11:08

score 0 · Answer 2 · answered Feb 11 '15 at 10:51

Ok, as usual I find the answer by myself after 12 seconds from posting the question on SO.

Install-Package jQuery.UI.i18n

The package doesn't appear on top of the list and I had to search for Tags:"jQueryUI" i18n to find it

Next step was to modify (for me that I use Web Optimization)

bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include("~/Scripts/jquery-ui-{version}.js").Include("~/Scripts/jquery-ui-i18n.js"));

Localization not working in jQuery UI datePicker

The question is

2 Answers2

Linked