当前位置:编程学习 > JAVA >>

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

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

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,