jQuery UI Datepicker - Localize calendar : UI Datepicker « jQuery « JavaScript Tutorial

Home
JavaScript Tutorial
1.Language Basics
2.Operators
3.Statement
4.Development
5.Number Data Type
6.String
7.Function
8.Global
9.Math
10.Form
11.Array
12.Date
13.Dialogs
14.Document
15.Event
16.Location
17.Navigator
18.Screen
19.Window
20.History
21.HTML Tags
22.Style
23.DOM Node
24.Drag Drop
25.Object Oriented
26.Regular Expressions
27.XML
28.GUI Components
29.Dojo toolkit
30.jQuery
31.Animation
32.MS JScript
JavaScript Tutorial » jQuery » UI Datepicker 
30.140.7.jQuery UI Datepicker - Localize calendar
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txtlicenses.
 
  http://docs.jquery.com/UI/Effects/Blind
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Datepicker - Localize calendar</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ar.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-bg.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ca.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-cs.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-da.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-de.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-el.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-eo.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-es.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-fa.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-fi.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-fr.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-he.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-hr.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-hu.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-hy.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-id.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-is.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-it.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ja.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ko.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-lt.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-lv.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ms.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-nl.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-no.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-pl.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-pt-BR.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ro.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ru.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sk.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sl.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sq.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sr.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sr-SR.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sv.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-th.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-tr.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-uk.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-zh-CN.js"></script>
  <script type="text/javascript" src="js/ui/i18n/ui.datepicker-zh-TW.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
  $(function() {
    $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
    $("#datepicker").datepicker($.datepicker.regional['fr']);
    $("#locale").change(function() {
      $('#datepicker').datepicker('option', $.extend({showMonthAfterYear: false},
        $.datepicker.regional[$(this).val()]));
    });
  });
  </script>
</head>
<body>

<div class="demo">
  
<p>Date: <input type="text" id="datepicker"/>&nbsp;
  <select id="locale">
    <option value="sq">Albanian (Gjuha shqipe)</option>
    <option value="ar">Arabic (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option>
    <option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option>
    <option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option>
    <option value="ca">Catalan (Catal&agrave;)</option>
    <option value="zh-CN">Chinese Simplified (&#31616;&#20307;&#20013;&#25991;)</option>
    <option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
    <option value="hr">Croatian (Hrvatski jezik)</option>
    <option value="cs">Czech (Ce&ouml;tina)</option>
    <option value="da">Danish (Dansk)</option>
    <option value="nl">Dutch (Nederlands)</option>
    <option value="eo">Esperanto</option>
    <option value="fa">Farsi/Persian (&#8235;(&#1601;&#1575;&#1585;&#1587;&#1740;</option>
    <option value="fi">Finnish (suomi)</option>
    <option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
    <option value="de">German (Deutsch)</option>
    <option value="el">Greek (&#917;&#955;&#955;&#951;&#957;&#953;&#954;&#940;)</option>
    <option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
    <option value="hu">Hungarian (Magyar)</option>
    <option value="is">Icelandic (&Otilde;slenska)</option>
    <option value="id">Indonesian (Bahasa Indonesia)</option>
    <option value="it">Italian (Italiano)</option>
    <option value="ja">Japanese (&#26085;&#26412;&#35486;)</option>
    <option value="ko">Korean (&#54620;&#44397;&#50612;)</option>
    <option value="lv">Latvian (Latvie&ouml;u Valoda)</option>
    <option value="lt">Lithuanian (lietuviu kalba)</option>
    <option value="ms">Malaysian (Bahasa Malaysia)</option>
    <option value="no">Norwegian (Norsk)</option>
    <option value="pl">Polish (Polski)</option>
    <option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option>
    <option value="ro">Romanian (Rom&acirc;n&#259;)</option>
    <option value="ru">Russian (&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)</option>
    <option value="sr">Serbian (&#1089;&#1088;&#1087;&#1089;&#1082;&#1080; &#1112;&#1077;&#1079;&#1080;&#1082;)</option>
    <option value="sr-SR">Serbian (srpski jezik)</option>
    <option value="sk">Slovak (Slovencina)</option>
    <option value="sl">Slovenian (Slovenski Jezik)</option>
    <option value="es">Spanish (Espa&ntilde;ol)</option>
    <option value="sv">Swedish (Svenska)</option>
    <option value="th">Thai (&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;)</option>
    <option value="tr">Turkish (T&uuml;rk&ccedil;e)</option>
    <option value="uk">Ukranian (&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072;)</option>
  </select></p>

</div><!-- End demo -->

<div class="demo-description">

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

</div><!-- End demo-description -->

</body>
</html>
30.140.UI Datepicker
30.140.1.jQuery UI Datepicker - Populate alternate field
30.140.2.jQuery UI Datepicker - Display button bar
30.140.3.jQuery UI Datepicker - Format date
30.140.4.jQuery UI Datepicker - Display month and year menus
30.140.5.jQuery UI Datepicker - Icon trigger
30.140.6.jQuery UI Datepicker - Display inline
30.140.7.jQuery UI Datepicker - Localize calendar
30.140.8.jQuery UI Datepicker - Restrict date range
30.140.9.jQuery UI Datepicker - Display multiple months
30.140.10.Create a date picker
30.140.11.Set date format (appendText: " MM/DD/YYYY")
30.140.12.dateFormat:"d MM yy"
30.140.13.Internationalize date picker
30.140.14.Use button to trigger date picker
30.140.15.Add image to date picker trigger button
30.140.16.Display two months
30.140.17.Display a dialog to hold the date picker
30.140.18.Set style for date picker
30.140.19.range Select: true,
30.140.20.firstDay: 1
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.