1、下载jQuery核心文件就不用说了吧,下载地址http://jqueryui.com/download
2、在HTML中引用下载下来的js文件
3.在HTML中引入默认样式表文件,引入css文件
4
4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。
1
|
< input
type = "text"
id = "
readonly = "readonly" /> |
5.编写js代码,实现最终效果。
1
2
3
|
$(document).ready( function () {
$( '#selectDate' ).datepicker(); // }); |
这里只是做了一个最基本的日期控件,我们还需要以中文显示,限制日期选择范围等需求,稍微修改js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<mce:script type= "text/javascript" ><!--
//等待dom元素加载完毕.
$( function (){
$( "#selectDate" ).datepicker({ //添加日期选择功能
numberOfMonths:1, //显示几个月
showButtonPanel: true , //是否显示按钮面板
dateFormat:
'yy-mm-dd' , //日期格式
clearText: "清除" , //清除日期的按钮名称
closeText: "关闭" , //关闭选择框的按钮名称
yearSuffix:
'年' , //年的后缀
showMonthAfterYear: true , //是否把月放在年的后面
defaultDate: '2011-03-10' , //默认日期
minDate: '2011-03-05' , //最小日期
maxDate: '2011-03-20' , //最大日期
monthNames: [ '一月' , '二月' , '三月' , '四月' , '五月' , '六月' , '七月' , '八月' , '九月' , '十月' , '十一月' , '十二月' ],
dayNames: [ '星期日' , '星期一' , '星期二' , '星期三' , '星期四' , '星期五' , '星期六' ],
dayNamesShort: [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ],
dayNamesMin: [ '日' , '一' , '二' , '三' , '四' , '五' , '六' ],
onSelect:
function (selectedDate) { //选择日期后执行的操作
alert(selectedDate);
}
});
});
// --></mce:script> |
效果如下:
这里基本上就满足我们使用的需要了。datepicker控件默认是英文的,可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,可以增加一个js文件将中文配置都放在里面,每次使用直接引用即可,这里放在jquery.ui.datepicker-zh-CN.js中,内容如下:
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' ]);
}); |
6.在页面中引入中文插件
1
2
|
<!-- 添加中文支持--> < mce:script
src = "js/jquery.ui.datepicker-zh-CN.js"
mce_src = "js/jquery.ui.datepicker-zh-CN.js"
type = "text/javascript" ></ mce:script >
|
完整的页面代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
< HTML >
< HEAD >
< meta
http-equiv = "Content-Type"
content = "text/html; charset=utf-8"
/> < TITLE >日期控件datepicker</ TITLE >
<!-- 引入 jQuery --> < mce:script
src = "js/jquery.1.4.2.js"
mce_src = "js/jquery.1.4.2.js"
type = "text/javascript" ></ mce:script >
<!--添加datepicker支持--> < mce:script
src = "js/jquery.ui.core.js"
mce_src = "js/jquery.ui.core.js"
type = "text/javascript" ></ mce:script >
< mce:script
src = "js/jquery.ui.datepicker.js"
mce_src = "js/jquery.ui.datepicker.js"
type = "text/javascript" ></ mce:script >
<!-- 或者引入jquery ui包,其中也包含对datepicker的支持
<mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>
--> <!--引入样式css--> < link
type = "text/css"
rel = "stylesheet"
href = "css/jquery-ui-1.7.3.custom.css"
mce_href = "css/jquery-ui-1.7.3.custom.css"
/> <!-- 添加中文支持--> < mce:script
src = "js/jquery.ui.datepicker-zh-CN.js"
mce_src = "js/jquery.ui.datepicker-zh-CN.js"
type = "text/javascript" ></ mce:script >
< mce:script
type = "text/javascript" > <!--
//等待dom元素加载完毕.
$(function(){
$("#selectDate").datepicker({//添加日期选择功能
numberOfMonths:1,//显示几个月
showButtonPanel:true,//是否显示按钮面板
dateFormat: 'yy-mm-dd',//日期格式
clearText:"清除",//清除日期的按钮名称
closeText:"关闭",//关闭选择框的按钮名称
yearSuffix: '年', //年的后缀
showMonthAfterYear:true,//是否把月放在年的后面
defaultDate:'2011-03-10',//默认日期
minDate:'2011-03-05',//最小日期
maxDate:'2011-03-20',//最大日期
//monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
//dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
//dayNamesMin: ['日','一','二','三','四','五','六'],
onSelect: function(selectedDate) {//选择日期后执行的操作
alert(selectedDate);
}
});
});
// --> </ mce:script >
</ HEAD >
< BODY >
< input
type = "text"
id = "selectDate"
readonly = "readonly" />
</ BODY >
</ HTML >
|