1：默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择
一个日期的时候，将自动关闭该日历选择面板
$(selector).datepicker([options]);
简单实例：
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerLocal
$(document).ready(function(){
$("#inputDate").datepicker({
/*区域化周名为中文*/
dayNamesMin:["日","一","二","三","四","五","六"],
/*每周从周一开始*/
firstDay:1,
/*区域化月名为中文习惯*/
monthNames:["1月","2月","3月","4月","5月","6月",
"7月","8月","9月","10月","11月","12月"],
/*月份显示在年后面*/
showMonthAfterYear:true,
/*年份后缀字符*/
yearSuffix:"年",
/*格式化中文日期
(因为月份中已经包含“月”字，所以这里省略)*/
dateFormat:"yy年MMdd日"
});
});
*{font-size:12px;}
请输入一个日期：
效果图：
2：指定弹出日期选择器的图片按钮
需要添加响应的资源文件：
$(document).ready(function() {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "Images/calendar.gif",
buttonImageOnly: true
});
});
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerIcon
$(document).ready(function(){
$("#datepicker").datepicker({
showOn:"button",
buttonImage:"Images/calendar.gif",
buttonImageOnly:true
});
});
*{font-size:12px;}
body{padding:30px;}
#datepicker{margin:0;height:13px;}
请选择一个日期：
效果图：
3：显示带年、月份下拉列表和按钮面板的日期选择器
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerLocal
$(document).ready(function(){
$("#inputDate").datepicker({
changeMonth:true,//可以选择月份
changeYear:true,//可以选择年份
showButtonPanel:true,//显示按钮面板
currentText:'今天',//当前日期按钮上显示的文字
closeText:'关闭',//关闭按钮上显示的文本
yearRange:'c-60:c+20'
});
});
*{font-size:12px;}
请输入一个日期：
效果图：
4：同时显示多个月份的日期选择器
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerButton
$(document).ready(function(){
$("#datepicker").datepicker({
numberOfMonths:3,//显示月份的个数
showCurrentAtPos:1,//当前月份在第二个位置
stepMonths:3//翻页时一次跳过三个月份
});
});
*{font-size:11px;}
#datepicker{margin:0;height:13px;}
请选择一个日期：
效果图：
5：日期选择器的一些方法
dialog, isDisabled, hide, show, refresh, getDate, setDate
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerDialog
$(document).ready(function(){
$("#inputDate").datepicker();
$("#showDialog").click(function(){
$("#inputDate").datepicker("dialog","",function(dateText,inst){
$("#inputDate").val(dateText);
});
});
});
*{font-size:12px;}
请输入一个日期：
Show
效果图：
6：日期选择器的一些事件
6.1 beforeShow事件：显示日期选择器之前触发该事件。
6.2 beforeShowDay事件：日期选择器上每一天选择之前都将触发该事件 function(date) {}
6.3 onChangeMonthYear: 当日期选择器选定新的年份或者月份时触发该事件function(year, month, inst);
6.4 onClose事件：当关闭日期选择器控件的时候触发此事件。function(dataText, inst) {}
6.5 onSelect事件：当日期选择器选中一个日期时触发该事件。function(dataText, inst) {} //dataText为所选的日期的字符串，inst为日期选择器实例
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerDialog
$(document).ready(function(){
/*有日志的日期集合*/
varhasLog=[{month:10,day:1},
{month:10,day:5},
{month:10,day:20}];
functionhasToday(date){
/*测试当前日期是否在集合中存在有相同项*/
for(variinhasLog){
/*因为js中的Date类型的月份取值范围是0-11，
所以这里调用getDate()以后要加1才是当前月份*/
if(hasLog[i].month==(date.getMonth()+1)&&
hasLog[i].day==date.getDate()){
returntrue;
}
}
returnfalse
}
$("#datepicker").datepicker({
beforeShowDay:function(date){
/*在显示日期之前，
测试如果当前日期在集合中存在，
则为当前日期添加一个class*/
vardat=newDate(date);
varcss="";
if(hasToday(dat)){
css="light_day";
}
return[true,css];
},
onSelect:function(dateText,inst){
/*在选中日期之后，
测试如果当前日期在集合中存在，
则向页面打印相应的提示信息*/
vardat=newDate(dateText);
if(hasToday(dat)){
varmsg="得到了日期："+dateText+
"，我们可以在这里查询当前日期的日志列表";
$("#logList").text(msg);
}
}
});
});
body{padding:30px;}
*{font-size:12px;}
#logList{margin:10px0;padding:8px;}
.light_day.ui-state-default{background:#fdc;}
.light_day.ui-state-default:hover,
.light_day.ui-state-default:active{background:#fed;}
效果图：
分类：
js
-05-07 21:49
4070人阅读
评论(5)
收藏
举报
1：默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择
一个日期的时候，将自动关闭该日历选择面板
$(selector).datepicker([options]);
简单实例：
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerLocal
$(document).ready(function(){
$("#inputDate").datepicker({
/*区域化周名为中文*/
dayNamesMin:["日","一","二","三","四","五","六"],
/*每周从周一开始*/
firstDay:1,
/*区域化月名为中文习惯*/
monthNames:["1月","2月","3月","4月","5月","6月",
"7月","8月","9月","10月","11月","12月"],
/*月份显示在年后面*/
showMonthAfterYear:true,
/*年份后缀字符*/
yearSuffix:"年",
/*格式化中文日期
(因为月份中已经包含“月”字，所以这里省略)*/
dateFormat:"yy年MMdd日"
});
});
*{font-size:12px;}
请输入一个日期：
效果图：
2：指定弹出日期选择器的图片按钮
需要添加响应的资源文件：
$(document).ready(function() {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "Images/calendar.gif",
buttonImageOnly: true
});
});
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerIcon
$(document).ready(function(){
$("#datepicker").datepicker({
showOn:"button",
buttonImage:"Images/calendar.gif",
buttonImageOnly:true
});
});
*{font-size:12px;}
body{padding:30px;}
#datepicker{margin:0;height:13px;}
请选择一个日期：
效果图：
3：显示带年、月份下拉列表和按钮面板的日期选择器
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerLocal
$(document).ready(function(){
$("#inputDate").datepicker({
changeMonth:true,//可以选择月份
changeYear:true,//可以选择年份
showButtonPanel:true,//显示按钮面板
currentText:'今天',//当前日期按钮上显示的文字
closeText:'关闭',//关闭按钮上显示的文本
yearRange:'c-60:c+20'
});
});
*{font-size:12px;}
请输入一个日期：
效果图：
4：同时显示多个月份的日期选择器
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerButton
$(document).ready(function(){
$("#datepicker").datepicker({
numberOfMonths:3,//显示月份的个数
showCurrentAtPos:1,//当前月份在第二个位置
stepMonths:3//翻页时一次跳过三个月份
});
});
*{font-size:11px;}
#datepicker{margin:0;height:13px;}
请选择一个日期：
效果图：
5：日期选择器的一些方法
dialog, isDisabled, hide, show, refresh, getDate, setDate
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerDialog
$(document).ready(function(){
$("#inputDate").datepicker();
$("#showDialog").click(function(){
$("#inputDate").datepicker("dialog","",function(dateText,inst){
$("#inputDate").val(dateText);
});
});
});
*{font-size:12px;}
请输入一个日期：
Show
效果图：
6：日期选择器的一些事件
6.1 beforeShow事件：显示日期选择器之前触发该事件。
6.2 beforeShowDay事件：日期选择器上每一天选择之前都将触发该事件 function(date) {}
6.3 onChangeMonthYear: 当日期选择器选定新的年份或者月份时触发该事件function(year, month, inst);
6.4 onClose事件：当关闭日期选择器控件的时候触发此事件。function(dataText, inst) {}
6.5 onSelect事件：当日期选择器选中一个日期时触发该事件。function(dataText, inst) {} //dataText为所选的日期的字符串，inst为日期选择器实例
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DatePickerDialog
$(document).ready(function(){
/*有日志的日期集合*/
varhasLog=[{month:10,day:1},
{month:10,day:5},
{month:10,day:20}];
functionhasToday(date){
/*测试当前日期是否在集合中存在有相同项*/
for(variinhasLog){
/*因为js中的Date类型的月份取值范围是0-11，
所以这里调用getDate()以后要加1才是当前月份*/
if(hasLog[i].month==(date.getMonth()+1)&&
hasLog[i].day==date.getDate()){
returntrue;
}
}
returnfalse
}
$("#datepicker").datepicker({
beforeShowDay:function(date){
/*在显示日期之前，
测试如果当前日期在集合中存在，
则为当前日期添加一个class*/
vardat=newDate(date);
varcss="";
if(hasToday(dat)){
css="light_day";
}
return[true,css];
},
onSelect:function(dateText,inst){
/*在选中日期之后，
测试如果当前日期在集合中存在，
则向页面打印相应的提示信息*/
vardat=newDate(dateText);
if(hasToday(dat)){
varmsg="得到了日期："+dateText+
"，我们可以在这里查询当前日期的日志列表";
$("#logList").text(msg);
}
}
});
});
body{padding:30px;}
*{font-size:12px;}
#logList{margin:10px0;padding:8px;}
.light_day.ui-state-default{background:#fdc;}
.light_day.ui-state-default:hover,
.light_day.ui-state-default:active{background:#fed;}
效果图：
