您现在的位置是：首页 > 前端

当前栏目

jQuery之日期选择器的深入解析

jQuery 日期深入解析选择器

2023-06-13 09:15:02 时间

1：默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择一个日期的时候，将自动关闭该日历选择面板
$(selector).datepicker([options]);
简单实例：

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DatePickerLocal</title>
<linkrel="stylesheet"type="text/css"href="themes/ui-lightness/jquery.ui.all.css"/>
<scripttype="text/javascript"src="JS/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.core.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.datepicker.js"></script>
<scripttype="text/javascript">
$(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日"
});
});
</script>
<style>
*{font-size:12px;}
</style>
</head>
<body>
请输入一个日期：
<inputtype="text"id="inputDate"/>
</body>
</html>

效果图：

2：指定弹出日期选择器的图片按钮
需要添加响应的资源文件：
复制代码代码如下:

        $(document).ready(function(){
                 $("#datepicker").datepicker({
                              showOn:"button",
                              buttonImage:"Images/calendar.gif",
                              buttonImageOnly:true
                });
         });

复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DatePickerIcon</title>
<linkrel="stylesheet"type="text/css"href="themes/ui-lightness/jquery.ui.all.css"/>
<scripttype="text/javascript"src="JS/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.core.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.datepicker.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({
  showOn:"button",
  buttonImage:"Images/calendar.gif",
  buttonImageOnly:true
});
});
</script>
<style>
*{font-size:12px;}
body{padding:30px;}
#datepicker{margin:0;height:13px;}
</style>
</head>
<body>
<div>请选择一个日期：<inputtype="text"id="datepicker"></div>
</body>
</html>

效果图：


3：显示带年、月份下拉列表和按钮面板的日期选择器
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DatePickerLocal</title>
<linkrel="stylesheet"type="text/css"href="themes/ui-lightness/jquery.ui.all.css"/>
<scripttype="text/javascript"src="JS/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.core.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.datepicker.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#inputDate").datepicker({
  changeMonth:true, //可以选择月份
  changeYear:true,  //可以选择年份
  showButtonPanel:true, //显示按钮面板
  currentText:"今天", //当前日期按钮上显示的文字
  closeText:"关闭",   //关闭按钮上显示的文本
  yearRange:"c-60:c+20"

});
});
</script>
<style>
*{font-size:12px;}
</style>
</head>
<body>
请输入一个日期：
<inputtype="text"id="inputDate"/>
</body>
</html>

效果图：

4：同时显示多个月份的日期选择器
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DatePickerButton</title>
<linkrel="stylesheet"type="text/css"href="themes/ui-lightness/jquery.ui.all.css"/>
<scripttype="text/javascript"src="JS/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.core.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.datepicker.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({
  numberOfMonths:3, //显示月份的个数
  showCurrentAtPos:1, //当前月份在第二个位置
  stepMonths:3 //翻页时一次跳过三个月份
});
});
</script>
<style>
*{font-size:11px;}
#datepicker{margin:0;height:13px;}
</style>
</head>
<body>
请选择一个日期：<inputtype="text"id="datepicker">
</body>
</html>

效果图：


5：日期选择器的一些方法
dialog,isDisabled,hide,show,refresh,getDate,setDate
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DatePickerDialog</title>
<linkrel="stylesheet"type="text/css"href="themes/ui-lightness/jquery.ui.all.css"/>
<scripttype="text/javascript"src="JS/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.core.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.datepicker.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#inputDate").datepicker();
$("#showDialog").click(function(){
  $("#inputDate").datepicker("dialog","",function(dateText,inst){
   $("#inputDate").val(dateText);
  });
});
});
</script>
<style>
*{font-size:12px;}
</style>
</head>
<body>
请输入一个日期：
<inputtype="text"id="inputDate"/>
<buttonid="showDialog">Show</button>
</body>
</html>

效果图：


6：日期选择器的一些事件
6.1beforeShow事件：显示日期选择器之前触发该事件。
6.2beforeShowDay事件：日期选择器上每一天选择之前都将触发该事件 function(date){}
6.3onChangeMonthYear:当日期选择器选定新的年份或者月份时触发该事件function(year,month,inst);
6.4onClose事件：当关闭日期选择器控件的时候触发此事件。function(dataText,inst){}
6.5onSelect事件：当日期选择器选中一个日期时触发该事件。function(dataText,inst){}  //dataText为所选的日期的字符串，inst为日期选择器实例
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DatePickerDialog</title>
<linkrel="stylesheet"type="text/css"href="themes/ui-lightness/jquery.ui.all.css"/>
<scripttype="text/javascript"src="JS/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.core.js"></script>
<scripttype="text/javascript"src="JS/jquery.ui.datepicker.js"></script>
<scripttype="text/javascript">
$(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);
   }
  }
});
});
</script>
<style>
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;}
</style>
</head>
<body>
<divid="datepicker"></div>
<divid="logList"></div>
</body>
</html>

效果图：

猜你喜欢

正式开源！独占时代结束
MySQL:灵活处理二进制数据（mysql二进制数据）
Tomcat下载和安装（图解）
Linux分支技术：让系统变得更加灵活（linux的分支）
终于支持多设备同时在线，微信新版本详细体验
快速学会Oracle构建完美表格（c oracle建表）
性Oracle 如何修改列的唯一性（oracle 修改列唯一）
#新闻拍一拍# Meow 攻击自动删除不安全的 Elasticsearch 数据库
CSS解决高度坍塌
干货分享--animate如何使用usb口调试影片animate使用usb口调试影片方法{an资源分享}
Oracle拥有团结友爱的全球员工大家庭（oracle全球员工）
HTML <hr> 标签
浅析Redis集群配置指南（redis集群配置详解）
微软突然删除Windows 10大量旧版累积更新可能是鼓励用户尽快升级？

zl程序教程

当前栏目

jQuery之日期选择器的深入解析

相关文章