Home > Developer > JavaScript
Format date
You can use the date format to redefine the format when Datepicker displays the date.
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9 <script>
10 $ (function (){
11 $ ("# datepicker"). datepicker ();
12 $ ("# format"). change (function (){
13 $ ("# datepicker"). datepicker ("option ",
14 "dateFormat", $ (this). val ());
15 });
16 });
17 </script>
18
19 <body>
20
21 <p> Date:
22 <input type = "text" id = "datepicker" size = "30"/> </p>
23 <p>
24 Format options: <br/>
25 <select id = "format">
26 <option value = "mm/dd/yy"> Default-mm/dd/yy </option>
27 <option value = "yy-mm-dd"> ISO 8601-yy-mm-dd </option>
28 <option value = "d M, y"> Short-d M, y </option>
29 <option value = "d MM, y"> Medium-d MM, y </option>
30 <option value = "DD, d MM, yy"> Full-DD, d MM, yy </option>
31 <option value = "'day' d' of 'mm' in the year 'yy">
32 With text-'day' d' of 'mm' in the year 'yy
33 </option>
34 </select>
35 </p>
36 </body>
37
Localization support
Datepicker is displayed in English by default. You can modify the Display language through configuration.
To support different languages, you can add them, for example:
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9 <script src = "scripts/jquery. ui. datepicker-ar.js"> </script>
10 <script src = "scripts/jquery. ui. datepicker-fr.js"> </script>
11 <script src = "scripts/jquery. ui. datepicker-he.js"> </script>
12 <script src = "scripts/jquery. ui. datepicker-zh-TW.js"> </script>
13
14 <script>
15 $ (function (){
16 $. datepicker. setDefaults ($. datepicker. regional [""]);
17 $ ("# datepicker"). datepicker ($. datepicker. regional ["fr"]);
18 $ ("# locale"). change (function (){
19 $ ("# datepicker"). datepicker ("option ",
20 $. datepicker. regional [$ (this). val ()]);
21 });
22 });
23 </script>
24
25 <body>
26 <p>
27 Date:
28 <input type = "text" id = "datepicker"/> & nbsp;
29 <select id = "locale">
30 <option value = "ar"> Arabic
31 <option value = "zh-TW"> Chinese Traditional (Traditional Chinese) </option>
32 <option value = "fr" selected = "selected"> French (français) </option>
33 <option value = "he"> Hebrew
34 </select>
35 </p>
36 </body>
37
If you need to add a custom language such as simplified Chinese, you can open jquery. ui. datepicker-zh-TW.js to see,
1/* Chinese initialisation for the jQuery UI date picker plugin .*/
2/* Written by Ressol (ressol@gmail.com ).*/
3 jQuery (function ($ ){
4 $. datepicker. regional ['zh-TW '] = {
5 closeText: 'interval ',
6 prevText: '& # x3C; last month ',
7 nextText: 'Next month & # x3E ;',
8 currentText: 'Today ',
9 monthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ',
10 'August 11', 'August 11', 'August 11', 'August 11', 'August 11'],
11 monthNamesShort: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ',
12 'August 11', 'August 11', 'August 11', 'August 11', 'August 11'],
13 dayNames: ['sunday', 'monday', 'tuesday', 'wedday', 'thurs', 'Friday', 'satur'],
14 dayNamesShort: ['sunday', 'monday', 'tues', 'wedneth', 'thurs', 'Friday', 'satur'],
15 dayNamesMin: ['day', 'yi', '2', '3', '4', '5', '6'],
16 weekHeader: 'Week ',
17 dateFormat: 'yy/mm/dd ',
18 firstDay: 1,
19 isRTL: false,
20 showMonthAfterYear: true,
21 yearSuffix: 'Year '};
22 $. datepicker. setDefaults ($. datepicker. regional ['zh-TW ']);
23 });
Change zh-TW to zh-CN, change the traditional "" to "close", save it as jquery. ui. datepicker-zh-CN.js, and then use zh-CN as the region option.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
