How to change language of jQuery UI datepicker

jQuery UI datepicker by default show widget text content in English language but you can change it any other language easily.

For this, you need to load language script file on your web page and point it to the datepicker widget.

Download and Include
Set language
Reset language
Demo
Conclusion

1. Download and Include

Download jQuery UI library from its Official website.
Now download your required language script from here. I have downloaded the datepicker-hi.js JS script for Hindi.
Include jQuery, jQuery UI library, and language script on your page.

<!-- Script -->
<script src='jquery-3.2.1.min.js' type='text/javascript'></script>

<!-- jQuery UI -->
<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
<script src='jquery-ui.min.js' type='text/javascript'></script>
 
<!-- Language script -->
<script src='datepicker-hi.js' type='text/javascript'></script>

2. Set language

Initialize datepicker on the input element and use $.datepicker.regional to change the language.

Completed Code

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <!-- Script -->
  <script src='jquery-3.2.1.min.js' type='text/javascript'></script>

  <!-- jQuery UI -->
  <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
  <script src='jquery-ui.min.js' type='text/javascript'></script>
 
  <!-- Language script -->
  <script src='datepicker-hi.js' type='text/javascript'></script>
</head>
<body>

  Select Date : <input type='text' id='datepicker' ><br/>

  <!-- Script -->
  <script type='text/javascript' >
  $( function() {

    // Initialize and change language to hindi
    $('#datepicker').datepicker( $.datepicker.regional[ "hi" ] );

  });
  </script>
 
</body>
</html>

3. Reset language

Pass "" value in regional to get back to the default language “English”.

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

Completed Code

<!-- Script -->
<script src='jquery-3.2.1.min.js' type='text/javascript'></script>

<!-- jQuery UI -->
<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
<script src='jquery-ui.min.js' type='text/javascript'></script>
 
<!-- Language script -->
<script src='datepicker-hi.js' type='text/javascript'></script>

Select Date : <input type='text' id='datepicker' ><br/>

<!-- Script -->
<script type='text/javascript' >
$( function() {
  // Reset language
  $.datepicker.setDefaults( $.datepicker.regional[ "" ] );

  // Initialize
  $('#datepicker').datepicker();

});
</script>

4. Demo

Click on the textbox.

5. Conclusion

Without including language script file it wouldn’t work. So, make sure to load language file first then call $.datepicker.regional to set it.

In the demonstration, I have included only one language script but you can include more than one script and set your required language for the datepicker.

If you found this tutorial helpful then don't forget to share.

Contents

1. Download and Include

2. Set language

3. Reset language

4. Demo

5. Conclusion