首页
所有分类
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 Event学习第八章 事件的顺序
Feb 07 Javascript
javascript if条件判断方法小结
May 17 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jquery图片滚动放大代码分享（1）
Aug 25 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
js获取Get值的方法
Sep 29 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Vue实现todo应用的示例
Feb 20 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
XPathParser(1) sentinel(1) ACID(1) sock(2) mysqldump(1) appdata(1) protocol(1) Stater(1) minio(1) Windows server 2003(1)
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
php 论坛采集程序 模拟登陆，抓取页面 实现代码
2009/07/09 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP基本语法总结
2014/09/06 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）
2015/11/29 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
VueJs组件之父子通讯的方式
2018/05/06 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
详解vue高级特性
2020/06/09 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
python处理cookie详解
2014/02/07 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python元组知识点总结
2019/02/18 Python
python中web框架的自定义创建
2019/09/08 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
太阳镜仓库，售价20美元或更少：Sunglass Warehouse
2016/09/28 全球购物
澳大利亚美容产品及化妆品在线：Activeskin
2020/06/03 全球购物
Marlies Dekkers内衣荷兰官方网店：荷兰奢侈内衣品牌
2020/03/27 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
学校评语大全
2014/05/06 职场文书
农业开发项目建议书
2014/05/16 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
优秀教师推荐材料
2014/12/16 职场文书
倡议书格式及范文
2015/04/29 职场文书
诗词赏析-（浣溪沙）
2019/08/13 职场文书