How to create UI Datepicker using jQuery ? - GeeksforGeeks

27 Apr, 2020
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=    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        <script src=    "http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>        <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"       rel="stylesheet" type="text/css" />     <script src=    "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 
<script src=    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        <script src=    "http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>        <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"       rel="stylesheet" type="text/css" />     <script src=    "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 
Fetch browser language version using JavaScript. Here is the code:var userLang = navigator.language || navigator.userLanguage;
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).var options = $.extend(    {},  // empty object      $.datepicker.regional[userLang], // Dynamically      { dateFormat: "mm/dd/yy" } // your custom options  );  $("#calendar").datepicker(options);
var options = $.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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js">    </script>      <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"           rel="stylesheet" type="text/css" />      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js">    </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
HTML-Misc
JavaScript-Misc
jQuery-Misc
Picked
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
Write From Home
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
File uploading in React.js