How to create UI Datepicker using jQuery ?
Localization means browser to display data in a different languages as per browser setting or manual setting inside the application. To implement jQuery UI Datepicker to display in different languages as per browser settings follow the steps:
Approach:
- Add the following JavaScript references.
<script src=</script><script src=</script>rel="stylesheet"type="text/css"/><script src=</script> - Fetch browser language version using JavaScript. Here is the code:
var userLang = navigator.language || navigator.userLanguage;
- Add the following JavaScript code to implement localization in jQuery Datepicker. Here we are using extend property to set regional language as per the browser setting (Step 2).
varoptions = $.extend({},// empty object$.datepicker.regional[userLang],// Dynamically{ dateFormat:"mm/dd/yy"}// your custom options);$("#calendar").datepicker(options);
Example:
<!doctype html> <html lang="en"> <head> <title>Localization JQuery UI Datepicker </title> <meta charset="utf-8"> <script src= </script> <script src= </script> <link href= rel="stylesheet" type="text/css" /> <script src= </script> <script type="text/javascript"> $(document).ready(function() { var userLang = navigator.language || navigator.userLanguage; var options = $.extend({}, // empty object $.datepicker.regional[userLang], { dateFormat: "mm/dd/yy" } // your custom options ); $("#calendar").datepicker(options); }); </script> </head> <body> <div class="container"> <h3>JQuery UI Datepicker Localization</h3> <div id="calendar"> </div> </div> </body> </html> |
Let’s see the following figures how it is showing when the language change:
Output 1: When changing regional language as English using “en-US” in the following code:
var options = $.extend( {}, // empty object $.datepicker.regional["en-US"], // Dynamically { dateFormat: "mm/dd/yy"} // your custom options ); |
Output 2: When changing regional language as Hindi using “hi” in the following code:
var options = $.extend( {}, // empty object $.datepicker.regional["hi"], // Dynamically { dateFormat: "mm/dd/yy"} // your custom options ); |
You can use regional language code as per your need from the following link : List of ISO 639-1 codes
Please Login to comment...