Date Picker Field - i18n

Introduction

Localizing the Date Picker field ensures that users interact with date selectors in their preferred language, enhancing usability and accessibility. This guide provides examples of how to set up the Date Picker in different languages using jQuery UI.

How does it work?

The script sets the Date Picker to use a specific regional setting by loading the corresponding localization file. The regional settings file includes translations and date format adjustments for the selected language. When the page loads, the Date Picker applies these settings, ensuring that date-related interactions conform to the specified locale.

Example 1: Localizing to Chinese (zh-CN)

1. Download the Chinese localization file from the provided URL http://code.google.com/p/listr/source/browse/#svn%2Ftrunk%2Flistr%2Flib%2Fjs%2Fui%2Fi18n.
2. Include the file in your project and use the following script:
   

   <script type="text/javascript" src="http://listr.googlecode.com/svn/trunk/listr/lib/js/ui/i18n/ui.datepicker-zh-CN.js" ></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
     });
   </script>

Example 2: Localizing to French (fr)

1. Download the French localization file from the provided URL https://gist.github.com/corsonr/4306287#file-jquery-ui-datepicker-fr-js.
2. Upload the file to your app's resources (Design App > Properties & Export > Add Resource).
3. Note the file’s hash variable (e.g., #appResource.jquery.ui.datepicker-fr.js#).
4. Add the following script to the Date Picker's custom HTML section:
   

   <script type="text/javascript" src="#appResource.jquery.ui.datepicker-fr.js#"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $.datepicker.setDefaults($.datepicker.regional['fr']);
     });
   </script>