内容简介:jQuery日期范围选择器
准备
使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持。
<link rel="stylesheet" href="css/daterangepicker.css" /> <script src="js/moment.min.js"></script> <script src="js/jquery.daterangepicker.js"></script>
HTML结构
在需要放置日期选择器的地方添加以下html结构,就是一个输入框。
<input type="text" id="datepicker" value="">
调用插件
调用jQuery Date Range Picker插件非常简单,和其他常见的jQuery插件一样:
$('#datepicker').dateRangePicker(option);
配置参数
该日期选择器的默认配置参数如下:
{ format: 'YYYY-MM-DD', separator: ' to ', language: 'auto', startOfWeek: 'sunday',// or monday getValue: function() { return this.value; }, setValue: function(s) { this.value = s; }, startDate: false, endDate: false, minDays: 0, maxDays: 0, showShortcuts: true, time: { enabled: false }, shortcuts: { //'prev-days': [1,3,5,7], 'next-days': [3,5,7], //'prev' : ['week','month','year'], 'next' : ['week','month','year'] }, customShortcuts : [], inline:false, container: 'body', alwaysOpen:false, singleDate:false, batchMode:false, beforeShowDay: [function], dayDivAttrs: [], dayTdAttrs: [], applyBtnClass: '' }
format
(String):Moment的日期格式。 点击这里
查看Moment文档。
separator
(String):日期字符串之间的分隔符。
language
(String):预定义的语言是"en"和"cn"。你可以使用这个参数自定义语言。也可以设置为"auto"来让浏览器自己检测语言。
startOfWeek
(String):"sunday" 或 "monday"。
getValue
(Function):当从DOM元素中获取日期范围时会调用该函数,函数的上下文被设置为datepicker DOM。
setValue
(Function):当向DOM元素中写入日期范围时调用该函数。
startDate
(String or false):定义用户允许的最早日期,格式和format相同。
endDate
(String or false):定义用户允许的最后日期,格式和format相同。
minDays
(Number) :该参数定义日期范围的最小天数,如果设置为0,表示不限制最小天数。
maxDays
(Number):该参数定义日期范围的最大天数,如果设置为0,表示不限制最大天数。
showShortcuts
(Boolean) :先生或隐藏shortcuts区域。
time
(Object):如果允许该参数就会添加时间的范围选择。
shortcuts
(Object):定义快捷键按钮。
customShortcuts
(Array):定义自定义快捷键按钮。
inline
(Boolean):使用inline模式渲染该日期选择器,而不是overlay模式。如果设置为true,则要一起设置container参数。
container
(String, css selector || DOM Object) :要进行渲染的日期选择器DOM元素。
alwaysOpen
(Boolean):如果使用inline模式,你可能希望在页面加载时就渲染日期选择器。该参数设置为true时会隐藏"close"按钮。
singleDate
(Boolean):设置为true可以选择单个的日期。
batchMode
(false / 'week' / 'month'):自动批处理模式。
事件
当该日期选择器在DOM中选择某个日期范围时会触发三个事件。
$('#datepicker') .dateRangePicker() .bind('datepicker-change',function(event,obj) { console.log(obj); // obj will be something like this: // { // date1: (Date object of the earlier date), // date2: (Date object of the later date), // value: "2013-06-05 to 2013-06-07" // } }) .bind('datepicker-apply',function(event,obj) { console.log(obj); }) .bind('datepicker-close',function() { console.log('close'); });
API
在你调用$(dom).dateRangePicker()之后:
$(dom).data('dateRangePicker') .setDateRange('2013-11-20','2013-11-25'); //set date range, two date strings should follow the `format` in config object .clear(); // clear date range .close(); // close date range picker overlay .open(); // open date range picker overlay .destroy(); // destroy all date range picker related things
以上所述就是小编给大家介绍的《jQuery日期范围选择器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- bootstrap-datetimepicker时间日期范围选取组件使用说明及简单教程
- 使用golang写一个高性能端口扫描器,支持IP范围,端口号范围
- ThinkPHP模板范围判断标签使用
- JavaScript生成指定范围的时间列表
- [译] Ruby 2.6 增加无穷范围
- 保持安全控制范围成功保护混合云
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ActionScript 3.0 Cookbook
Joey Lott、Darron Schall、Keith Peters / Adobe Dev Library / 2006-10-11 / GBP 28.50
Well before Ajax and Microsoft's Windows Presentation Foundation hit the scene, Macromedia offered the first method for building web pages with the responsiveness and functionality of desktop programs......一起来看看 《ActionScript 3.0 Cookbook》 这本书的介绍吧!