jQuery UI & Datepicker: Localize calendar

This entry is part 10 of 14 in the series jQuery UI Datepicker

jQuery UI Datepicker – Localize calendar

Localize the datepicker calendar language and format (English / Western formatting is the default).

The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Localize calendar</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js'></script>
    <script src='//jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker($.datepicker.regional[ 'fr' ]);
            $('#locale').change(function () {
                $('#datepicker').datepicker('option',
                        $.datepicker.regional[ $(this).val() ]);
            });
        });
    </script>
</head>
<body>

<p>Date: <input type='text' id='datepicker'> 
    <select id='locale'>
        <option value='ar'>Arabic (‫(العربية</option>
        <option value='zh-TW'>Chinese Traditional (繁體中文)</option>
        <option value=''>English</option>
        <option value='fr' selected='selected'>French (Français)</option>
        <option value='he'>Hebrew (‫(עברית</option>
    </select></p>

</body>
</html>
Try The Code Datepicker Widgets API Doc
Series Navigation<< jQuery UI & Datepicker: Display inline
jQuery UI & Datepicker: Display month & year menus >>

Leave a comment

Leave a Reply