首页
所有分类
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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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
策略(1) 内存(1) 事务(5) 缓存(3) 连接数(1) ipv6(1) 弱口令(1) 性能优化(3) 锁(1) 逻辑架构(1)
You might like
一漂亮的PHP图片验证码实例
2014/03/21 PHP
神盾加密解密教程（一）PHP变量可用字符
2014/05/28 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
微信小程序：数据存储、传值、取值详解
2019/05/07 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python字符串处理之count()方法的使用
2015/05/18 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python装饰器知识点补充
2018/05/28 Python
python如何实现数据的线性拟合
2019/07/19 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
End Clothing美国站：英国男士潮牌商城
2018/04/20 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
岗位职责的定义
2013/11/10 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
策划创业计划书
2014/02/06 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
房地产端午节活动方案
2014/08/24 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
酒桌上的开场白
2015/06/01 职场文书
高中数学教学反思范文
2016/02/18 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python