首页
所有分类
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 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript与CSS复习（《精通javascript》）
Jun 29 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
Bootstrap警告框（Alert）插件使用方法
Mar 21 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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
expdp(1) callback(1) Vite(1) hook(1) 字符画(1) 热力图(1) cudnn(1) 数据备份(2) dict(1) 脚本(1)
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php中static和const关键字用法分析
2016/12/07 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
php实现小程序支付完整版
2018/10/09 PHP
js操作checkbox遇到的问题解决
2013/06/29 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[01:09]模型精美，特效酷炫！TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python进程间通信之共享内存详解
2017/10/30 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python购物车程序简单代码
2018/04/18 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌：Acne Studios
2017/07/09 全球购物
法学个人求职信范文
2014/01/27 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
银行给客户的感谢信
2015/01/23 职场文书
监守自盗观后感
2015/06/10 职场文书
小学美术教学反思
2016/02/17 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
Python日志模块logging用法
2022/06/05 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android