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