Jquery日期选择datepicker插件用法实例分析
本文实例讲述了Jquery日期选择datepicker插件用法。分享给大家供大家参考。具体如下：
1、首先将Jquery中的datepicker插件中的相关属性值改成中文的：
$.datepicker.regional['zh-CN']={
clearText:'清除',
clearStatus:'清除已选日期',
closeText:'关闭',
closeStatus:'不改变当前选择',
prevText:'<上月',
prevStatus:'显示上月',
prevBigText:'<<',
prevBigStatus:'显示上一年',
nextText:'下月>',
nextStatus:'显示下月',
nextBigText:'>>',
nextBigStatus:'显示下一年',
currentText:'今天',
currentStatus:'显示本月',
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:['一','二','三','四','五','六','七','八','九','十','十一','十二'],
monthStatus:'选择月份',
yearStatus:'选择年份',
weekHeader:'周',
weekStatus:'年内周次',
dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin:['日','一','二','三','四','五','六'],
dayStatus:'设置DD为一周起始',
dateStatus:'选择m月d日,DD',
dateFormat:'yy-mm-dd',
firstDay:1,
initStatus:'请选择日期',
isRTL:false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
2、html页面中有两个日期输入框，分别为起始日期和结束日期：
<labelfor="start-datepicker">起始日期:</label><inputtype="text"class="datepickertest-image-datepicker"id="start-datepicker"size="15"/> <labelfor="end-datepicker">结束日期:</label><inputtype="text"class="datepickertest-image-datepicker"id="end-datepicker"size="15"/>
3、调用修改后的datepicker插件：
var$start_date_value="2012年1月1日";//TODO改成可以配置的
var$end_date_value=newDate();
//Whendocumenthasloaded,initializepaginationandform
$(document).ready(function(){
$(".imagezz").click($test_image_check_box_click);
$(".test-image-datepicker").datepicker({
changeMonth:true,
changeYear:true,
showOn:"both",
buttonImage:"images/calendar.gif",
buttonImageOnly:true,
showButtonPanel:true,
onSelect:function(dateText,inst){
if($(this).attr("id")=="start-datepicker"){
$start_date_value=dateText;
}
if($(this).attr("id")=="end-datepicker"){
$end_date_value=dateText;
}
//下面可以写一些根据日期变化引起页面相关部分修改的函数
//......
}
});
$(".test-image-datepicker").datepicker("option","dateFormat","yy年mm月dd日");
$('.test-image-datepicker').attr("readonly","readonly");
$("#start-datepicker").datepicker("setDate",$start_date_value);
$("#end-datepicker").datepicker("setDate",$end_date_value);
datepicker其余选项及方法详见：http://api.jqueryui.com/datepicker/
希望本文所述对大家的jQuery程序设计有所帮助。