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 https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

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

Syntax:

// 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>

OR

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

Example:

<!doctype html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"/>
    <title>How To Localize Bootstrap 5 Datepicker Example - Techsolutionstuff</title>  
</head>
<body>
    <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>
                </select>
                </p>
            </div>            
        </div>
    </div>
</body>  
</html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script>
    $(function(){        
        $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
        $( "#locale" ).on( "change", function() {
        $( "#datepicker" ).datepicker( "option",
            $.datepicker.regional[ $( this ).val() ] );
        });
    });
</script>

Output:

How-To-Localize-Bootstrap-5-Datepicker-Example

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS