100字范文 > jQuery之日期选择器

jQuery之日期选择器

时间：2024-02-15 22:31:50

相关推荐

jQuery之日期选择器

1：默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择

一个日期的时候，将自动关闭该日历选择面板

$(selector).datepicker([options]);

简单实例：

效果图：

2：指定弹出日期选择器的图片按钮

需要添加响应的资源文件：

$(document).ready(function() {

$("#datepicker").datepicker({

showOn: "button",

buttonImage: "Images/calendar.gif",

buttonImageOnly: true

});

效果图：

3：显示带年、月份下拉列表和按钮面板的日期选择器

效果图：

4：同时显示多个月份的日期选择器

效果图：

5：日期选择器的一些方法

dialog, isDisabled, hide, show, refresh, getDate, setDate

效果图：

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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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>

效果图：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。