jQuery之日期选择器

最新推荐文章于 2024-03-17 00:10:12 发布
最新推荐文章于 2024-03-17 00:10:12 发布
阅读量1.2w 收藏 12
点赞数
分类专栏： js 文章标签： jquery stylesheet function xhtml date input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshisap/article/details/7543969
版权

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>

效果图：

  



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>

效果图：

   


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>

效果图：

  


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>

效果图：

  


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>

效果图：

  


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>

效果图：

  











波哥的技术积累
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
jQuery jSelectDate 下拉日期选择器插件
05-01
内容索引:脚本资源,jQuery,jSelectDate,日期选择器,Js网页日历　　jQuery 下拉日期选择器插件，名字叫jSelectDate，含有一个示例，示例只是向使用者说明如何使用本插件，没有经CSS美化，如果要想取得更好、更美观的下拉日期选择器效果，需要仔细查看jQuery的官方说明，这里提供本插件下载。
jQuery select年月日(生日)选择器
ld_____的博客
09-10 7573
实际项目中，在用户的个人中心，编辑用户资料时经常会遇到选择生日选项的问题。 因为我项目工程中没有使用如jQuery UI的插件性下拉列表，所以选择select + option的原生方式，实现选择器。 能够准确计算闰年的年月日，方便表单处理。 实际效果如下图，式样略粗糙 HTML 生日中的年月日以下拉方式，我们给每个select加个rel的属性，当已知用户生日时，直接通过rel属
jQuery UI -- 日历选择器，高端web前端开发
最新发布
03-17 1041
2、关于JS的部分，将我们引入的js和。的大小是223KB，而和的大小一起是84KB。jQuery UI为了让日期选择器与我们的网站整体格调相似，我们先来看一下 datepicker() 样式的修改。核心手段就是定位要修改部位的class，然后在自己的css中修改样式即可覆盖。下面列举几个例子:更改jQuery UI主题的对话框header的背景按钮正常状态的背景日历UI的今天单元格样式color:#f60;日历UI的选定单元格样式color:#06f;
jQuery实现日期选择器
一个前端工作者的博客
03-31 1464
日期选择器
jQuery UI 实例 - 日期选择器（Datepicker）
unber的博客
04-10 3030
从弹出框或内联日历选择一个日期。如需了解更多有关 datepicker 部件的细节，请查看 API 文档。
jquery 年月日时间选择器
zackboys的博客
10-18 4048
jquery年月日时间选择器
jQuery之日期选择器的深入解析
10-27
本篇文章是jQuery中的日期选择器进行了详细的分析介绍，需要的朋友参考下
jquery编写日期选择器
10-20
本篇文章主要介绍了jquery编写日期选择器的实现过程与方法，具有很好的参考价值。下面跟着小编一起来看下吧
jQuery日期选择器插件DCalendar
06-24
jQuery日期选择器插件DCalendar是一款可以用于制作日历和日期选择器，兼容IE8浏览器。
dateTimePicker:一个 Jquery 日期时间选择器插件
05-18
项目简介 一个基于 Jquery 的日期时间选择器插件（使用的时候，请保证插件脚本在 Jquery 之后引用） 插件兼容到 IE7 ，但 IE7 和 IE8 下需要多引入一个 es5-shim.min.js （在 demo 目录下可以找到） 虽然目前市面上这类插件很多，但大多数都只提供日期选择功能，没有精确到时分秒 又或者虽然提供时间选择，但界面过于花俏，不够简洁，要用到项目中必须花不少精力去调整样式 这个插件本着简洁的初衷，界面极少用到黑白以外的色调，确保能适应大多数场景 啥？你的站点本来就是很花俏，需要鲜艳的风格？ 不好意思，要么找更适合你的插件，要么直接该源文件调整样式吧...实在没考虑到那样的需求，毕竟它不是完美的... 插件使用了 webpack 打包，最终只生成一个 js 文件，确保了使用上的简单 但...同时也正因为使用了 webpack 打包，对于 IE7 和 IE8，需要
一个基于jQuery 实现的jSelectDate 下拉日期选择器插件源码
03-23
一个基于jQuery 实现的jSelectDate 下拉日期选择器插件源码
Jquery.DateSelector 下拉框日期控件
01-29
基于 jquery 封装的 日期控件。 详情 ： http://blog.csdn.net/moxie_yan/article/details/43274729
jquery-year-picker:用于 jquery UI 的年份选择器插件，例如 datepicker。 它允许用户从列表中选择年份
06-04
jquery-year-picker 用于 jquery UI 的年份选择器插件，例如 datepicker。 它允许用户从列表中选择年份。 用法 在 html 页面上放置一个带有 id 或 css 类的文本框。 在指定的 id 或类名上调用yearpicker jquery 方法。 Yearpicker 准备好了。 例子$("#txtDate").yearpicker({ 更改年份：true }); 属性 changeYear ：如果值为 true，则它将显示一个下拉列表以选择年份。 否则，您可以使用左/右箭头更改年份。 minDate/maxDate ：限制用户从特定范围中选择年份（与 jquery 日期选择器相同）。 dateFormat : 要在 minDate/maxDate 属性中指定的日期格式。 预习
jQuery日期选择插件
01-20
简单实用蓝色jQuery日期选择插件。使用jquery进行日期事件
jquery实现日历选择功能
qq_37766613的博客
09-04 1320
基于jquery实现日历选择功能（含完整代码），编写日历的基础思想是先获取当前日期，根据当前月份判断本月天数，然后依次获取其他年份月份数据。
日期选择器：jquery datepicker的使用
stationinthemind的博客
11-06 4563
在jquery ui中，提供了一个非常实用的日期选择器：datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。demodownload下载源码。
jQuery插件 - 下拉列表日期选择控件
热门推荐
lee576的专栏
03-27 1万+
日期选择在开发中的应用应该是再常见不过的了~以前大多数的日期选择基本上以这种形式体现：图1:图2:但是，在我们经过很多次的使用和用户反馈中得之，这种方式操作不够方便，虽然看起来很直观，但如果是选2009，以“图1”哪种方式就很难操作，需要用户点击好多次才可以选到。图2的还要好些，不过感觉上还是不怎么好。于是，有些网站就出现了以这种形式出现的日期选择控件：另外有一点比较重要的！图一图二的哪种方式，无
jquery时间选择器
12-13
以下是使用jQuery实现时间选择器的步骤： 1. 在HTML文档中引入最新版本的jQuery库和日期选择器插件。可以通过以下方式引入： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery[email protected]/dist/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery[email protected]/themes/base/jquery-ui.css"> ``` 2. 在HTML文档中添加一个文本框，用于显示选择的日期。例如： ```html <input type="text" id="datepicker"> ``` 3. 初始化日期选择器。在页面加载完成后，使用以下代码进行初始化： ```javascript $(document).ready(function() { $("#datepicker").datepicker(); }); ``` 这样就可以在页面上显示一个日期选择器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

波哥的技术积累

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值