首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 19, 2013

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Local</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="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>
请输入一个日期：
<input type="text" id="inputDate" />
</body>
</html>

效果图：
 jQuery之日期选择器的深入解析

2：指定弹出日期选择器的图片按钮
需要添加响应的资源文件：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePickerIcon</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="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>请选择一个日期：<input type="text" id="datepicker"></div>
</body>
</html>

效果图：
  jQuery之日期选择器的深入解析

3：显示带年、月份下拉列表和按钮面板的日期选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Local</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="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>
请输入一个日期：
<input type="text" id="inputDate" />
</body>
</html>

效果图：
  jQuery之日期选择器的深入解析
4：同时显示多个月份的日期选择器
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePickerButton</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="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>
请选择一个日期：<input type="text" id="datepicker">
</body>
</html>

效果图：
  jQuery之日期选择器的深入解析

5：日期选择器的一些方法
dialog, isDisabled, hide, show, refresh, getDate, setDate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Dialog</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="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>
请输入一个日期：
<input type="text" id="inputDate" />
<button id="showDialog">Show</button>
</body>
</html>

效果图：
  jQuery之日期选择器的深入解析

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为日期选择器实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Dialog</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* 有日志的日期集合 */
 var hasLog=[{ month:10,  day:1 },
    { month:10, day:5 },
    { month:10, day:20 }]; function hasToday(date){
  /* 测试当前日期是否在集合中存在有相同项 */
  for(var i in hasLog){
   /* 因为js中的Date类型的月份取值范围是0-11，
    所以这里调用getDate()以后要加1才是当前月份 */
   if(hasLog[i].month == (date.getMonth()+1) &&
    hasLog[i].day == date.getDate()){
    return true;
   }
  }
  return false
 }
 $("#datepicker").datepicker({ 
  beforeShowDay : function(date){
   /* 在显示日期之前，
    测试如果当前日期在集合中存在，
    则为当前日期添加一个class */
   var dat = new Date(date);
   var css ="" ;
   if(hasToday(dat)){
    css="light_day";
   }
   return [true, css];
  },
  onSelect : function(dateText,inst){
   /* 在选中日期之后，
    测试如果当前日期在集合中存在，
    则向页面打印相应的提示信息 */
   var dat = new Date(dateText);
   if(hasToday(dat)){
    var msg="得到了日期：" + dateText + 
     "，我们可以在这里查询当前日期的日志列表";
    $("#logList").text(msg);
   }
  }
 });
});
</script>
<style>
body{ padding:30px; }
*{ font-size:12px; }
#logList{ margin:10px 0; 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>
<div id="datepicker"></div>
<div id="logList"></div>
</body>
</html>

效果图：
  jQuery之日期选择器的深入解析

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
Vue 2.5 Level E 发布了： 新功能特性一览
Oct 24 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
jQuery之按钮组件的深入解析
Jun 19 #Javascript
jQuery之自动完成组件的深入解析
Jun 19 #Javascript
jQuery之折叠面板的深入解析
Jun 19 #Javascript
jQuery之选择组件的深入解析
Jun 19 #Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 #Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 #Javascript
解析JavaScript中的标签语句
Jun 19 #Javascript
R72E(1) WR-800F(1) 对讲机(1) DE1102(1) R71E(1) SONY600GR(1) R9700(1) 胆机(1) ICOM(2) DE1107(3)
You might like
重置版游戏视频
2020/04/09 魔兽争霸
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php命令行用法入门实例教程
2014/10/27 PHP
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Bootstrap Table使用整理（三）
2017/06/09 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[02:07]DOTA2新英雄展现中国元素，完美“圣典”亮相央视
2016/12/19 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
python+selenium开发环境搭建图文教程
2017/08/11 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
Steve Madden官网：美国鞋类品牌
2017/01/29 全球购物
澳大利亚电商Catch新西兰站：Catch.co.nz
2020/05/30 全球购物
Android笔试题总结
2014/11/29 面试题
构造方法和其他方法的区别
2016/04/26 面试题
幼师求职自荐信范文
2014/01/26 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
某某同志考察材料
2014/05/28 职场文书
庐山导游词
2015/02/03 职场文书
工作迟到检讨书范文
2015/05/06 职场文书