jQuery 入門教程(30): jQuery UI Datepicker 示例(三)

格式化日期
可以通過日期格式重新定義Datepicker顯示日期時的格式。

1 <!doctype html>

2 <html lang="en">

3 <head>

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

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

 

本地化支持

20130319004

Datepicker缺省使用英語顯示,可以通過配置修改顯示語言。
如果需要支持不同語言,可以添加,如:

1 <!doctype html>

2 <html lang="en">

3 <head>

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

25 <body>

26     <p>

27         Date:

28         <input type="text" id="datepicker" />&nbsp;

29   <select id="locale">

30       <option value="ar">Arabic (‫(لعربي</option>

31       <option value="zh-TW">Chinese Traditional (繁體中文)</option>

32       <option value="fr" selected="selected">French (Français)</option>

33       <option value="he">Hebrew (‫(עברית</option>

34   </select>

35     </p>

36 </body>

37 </html>

如果需要添加自定義的語言,比如簡體中文,可以打開jquery.ui.datepicker-zh-TW.js 看看,
20130319005

 

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: '關閉',

6         prevText: '&#x3C;上月',

7         nextText: '下月&#x3E;',

8         currentText: '今天',

9         monthNames: ['一月','二月','三月','四月','五月','六月',

10         '七月','八月','九月','十月','十一月','十二月'],

11         monthNamesShort: ['一月','二月','三月','四月','五月','六月',

12         '七月','八月','九月','十月','十一月','十二月'],

13         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],

14         dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],

15         dayNamesMin: ['日','一','二','三','四','五','六'],

16         weekHeader: '周',

17         dateFormat: 'yy/mm/dd',

18         firstDay: 1,

19         isRTL: false,

20         showMonthAfterYear: true,

21         yearSuffix: '年'};

22     $.datepicker.setDefaults($.datepicker.regional['zh-TW']);

23 });

隻要把zh-TW 改成 zh-CN ,把其中的繁體“關閉”改成“關閉” 保存為 jquery.ui.datepicker-zh-CN.js,然後使用 zh-CN 作為區域選項即可。

 

發佈留言