在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要。本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置。
jQuery UI是一套基于jQuery控件和动画效果Javascript类库。可以用来构建交互式的互联网应用程序。最新版本1.10.4.基于jQuery 1.6+jQuery UI官方网站
Datapicker是jQuery UI里面控件的一个控件。主要是给用户呈现日历,方便用户选择日期和时间。
1 |
$( "#startdate" ).datepicker(); |
程序运行结果如下:
可以datepicker控件显示出来了,但是全部是英文。所以我们需要对它进行修改,让它默认显示为中文。比如周一到周日显示为:“一、二、三、四、五、六、日”这样的汉字。在使用datepicker之前,使用下面代码,将datepicker的语言设置为中文就好了。代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
jQuery( function ($){ $.datepicker.regional[ ‘zh-CN‘ ] = { closeText: ‘关闭‘ , prevText: ‘<上月‘ , nextText: ‘下月>‘ , currentText: ‘今天‘ , monthNames: [ ‘一月‘ , ‘二月‘ , ‘三月‘ , ‘四月‘ , ‘五月‘ , ‘六月‘ , ‘七月‘ , ‘八月‘ , ‘九月‘ , ‘十月‘ , ‘十一月‘ , ‘十二月‘ ], monthNamesShort: [ ‘一‘ , ‘二‘ , ‘三‘ , ‘四‘ , ‘五‘ , ‘六‘ , ‘七‘ , ‘八‘ , ‘九‘ , ‘十‘ , ‘十一‘ , ‘十二‘ ], dayNames: [ ‘星期日‘ , ‘星期一‘ , ‘星期二‘ , ‘星期三‘ , ‘星期四‘ , ‘星期五‘ , ‘星期六‘ ], dayNamesShort: [ ‘周日‘ , ‘周一‘ , ‘周二‘ , ‘周三‘ , ‘周四‘ , ‘周五‘ , ‘周六‘ ], dayNamesMin: [ ‘日‘ , ‘一‘ , ‘二‘ , ‘三‘ , ‘四‘ , ‘五‘ , ‘六‘ ], weekHeader: ‘周‘ , dateFormat: ‘yy-mm-dd‘ , firstDay: 1, isRTL: false , showMonthAfterYear: true , yearSuffix: ‘年‘ }; $.datepicker.setDefaults($.datepicker.regional[ ‘zh-CN‘ ]); }); |
作者微博 @bage88
下面是一个可以使用新窗口打开的链接:
1 |
|
jQuery UI Datepicker使用介绍,布布扣,bubuko.com
原文地址:http://www.cnblogs.com/liminjun88/p/3759694.html