jQuery 入门教程(30): jQuery UI Datepicker 示例(三)分析

java哥 阅读:233 2021-04-01 09:58:39 评论:0


格式化日期
可以通过日期格式重新定义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>

20130319005
如果需要添加自定义的语言,比如简体中文,可以打开jquery.ui.datepicker-zh-TW.js 看看,

1 /* Chinese initialisation for the jQuery UI date picker plugin. */
2 /* Written by Ressol ([email protected]). */
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 作为区域选项即可。

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号