How To Localize Bootstrap 5 Datepicker Example

In this article, we will see how to localize the bootstrap 5 datepicker example. Here, we will learn about bootstrap 5 datepicker Localization using jquery UI. Localize the datepicker calendar language and format. The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

So, let's see bootstrap 5 datepicker Localization, localization calendar jquery ui datepicker, jquery ui datepicker localize calendar.

LocalizationDatepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., jquery.ui.datepicker-fr.js for French. The desired localization file should be included after the main datepicker code. 

Localization files can be found at

The $.datepicker.regional attribute holds an array of localizations, indexed by language code, with "" referring to the default (English).


// You can restore the default localizations with:

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

// And can then override an individual datepicker for a specific locale:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

Also, you can use a different kind of js for different languages or you can use a single i18n CDN file.

<script src="i18n/datepicker-ar.js"></script>
<script src="i18n/datepicker-fr.js"></script>
<script src="i18n/datepicker-he.js"></script>
<script src="i18n/datepicker-zh-TW.js"></script>


<script src=""></script>


<!doctype html>
<html lang = "en">
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href=""/>
    <title>How To Localize Bootstrap 5 Datepicker Example - Techsolutionstuff</title>  
    <h5 align="center" class="mb-5 mt-5">How To Localize Bootstrap 5 Datepicker Example - Techsolutionstuff</h5>
    <div class="container">
        <div class="row">
            <div class="col-sm-12" align="center">
                <p>Date: <input type="text" id="datepicker" size="30" style="margin-right:15px;">
                <select id="locale">
                    <option value="ar">Arabic (&#x202B;(&#x627;&#x644;&#x639;&#x631;&#x628;&#x64A;&#x629;</option>
                    <option value="zh-TW">Chinese Traditional (&#x7E41;&#x9AD4;&#x4E2D;&#x6587;)</option>
                    <option value>English</option>
                    <option value="fr" selected="selected">French (Fran&#xE7;ais)</option>
                    <option value="he">Hebrew (&#x202B;(&#x5E2;&#x5D1;&#x5E8;&#x5D9;&#x5EA;</option>
<script src = ""></script>  
<script src=""></script>
<script src=""></script>
<script src=""></script>
        $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
        $( "#locale" ).on( "change", function() {
        $( "#datepicker" ).datepicker( "option",
            $.datepicker.regional[ $( this ).val() ] );




You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.