首页 > 程序开发 > web前端 > JavaScript >

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

2013-04-03

格式化日期可以通过日期格式重新定义Datepicker显示日期时的格式。1 <!doctype html>2 <html lang="en">3 <head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesh...

格式化日期
可以通过日期格式重新定义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="&#39;day&#39; d &#39;of&#39; MM &#39;in the year&#39; yy">

32 With text - &#39;day&#39; d &#39;of&#39; MM &#39;in the year&#39; 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 (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option>

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

32 <option value="fr" selected="selected">French (Fran&ccedil;ais)</option>

33 <option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</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[&#39;zh-TW&#39;] = {

5 closeText: &#39;關閉&#39;,

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

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

8 currentText: &#39;今天&#39;,

9 monthNames: [&#39;一月&#39;,&#39;二月&#39;,&#39;三月&#39;,&#39;四月&#39;,&#39;五月&#39;,&#39;六月&#39;,

10 &#39;七月&#39;,&#39;八月&#39;,&#39;九月&#39;,&#39;十月&#39;,&#39;十一月&#39;,&#39;十二月&#39;],

11 monthNamesShort: [&#39;一月&#39;,&#39;二月&#39;,&#39;三月&#39;,&#39;四月&#39;,&#39;五月&#39;,&#39;六月&#39;,

12 &#39;七月&#39;,&#39;八月&#39;,&#39;九月&#39;,&#39;十月&#39;,&#39;十一月&#39;,&#39;十二月&#39;],

13 dayNames: [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;],

14 dayNamesShort: [&#39;周日&#39;,&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;],

15 dayNamesMin: [&#39;日&#39;,&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;],

16 weekHeader: &#39;周&#39;,

17 dateFormat: &#39;yy/mm/dd&#39;,

18 firstDay: 1,

19 isRTL: false,

20 showMonthAfterYear: true,

21 yearSuffix: &#39;年&#39;};

22 $.datepicker.setDefaults($.datepicker.regional[&#39;zh-TW&#39;]);

23 });

只要把zh-TW 改成 zh-CN ,把其中的繁体“關閉”改成“关闭” 保存为 jquery.ui.datepicker-zh-CN.js,然后使用 zh-CN 作为区域选项即可。

相关文章
最新文章
热点推荐