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之日期选择器的深入解析
Javascript 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
jquery实现数字输入框
Feb 22 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php数组编码转换示例详解
2014/03/11 PHP
php实现的ping端口函数实例
2014/11/12 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
应届生自荐信范文
2014/02/21 职场文书
项目建议书格式
2014/03/12 职场文书
小露珠教学反思
2014/04/30 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript