作者:佳人蔚虹的小资心情_396 | 来源:互联网 | 2018-06-20 16:28
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为日期选择器实例
代码如下:
效果图: