带有源代码下载的jQuery日期范围选择器

jquery日期范围选择器是一个JQuery日期选择器插件，允许用户选择日期和时间范围。整个日期选择器插件使用CSS呈现样式，使用CSS自定义皮肤非常容易。而且浏览器非常兼容，支持多种时间格式。

查看演示下载源代码

准备

这个日期选择器插件的使用需要jQuery 1.3.2和Moment 2.2.0的支持。

链接rel='样式表' href=' CSS/datelangepicker . CSS ' rel=' externalnofallow '/script src=' http : js/moment . min . js '/script script src=' http 3360 js/jquery . datelangepicker . js '/script html结构

在需要放置日期选择器的地方添加以下html结构，这是一个输入框。

输入类型=' text' id=' datepicker' value='调用插件

调用jQuery日期范围选择器插件和其他常见的jQuery插件一样简单：

$('#datepicker ')。日期范围选择器(选项)；结构参数

该日期选择器的默认配置参数如下：

{ format: 'YYYY-MM-DD '，separator: ' to '，language: 'auto '，startOfWeek: ' sunday '，//或周一getvalue : function(){ return this . value；}，setValue:函数{ this . value=s；}，startDate: false，endDate: false，minDays: 0，maxDays: 0，showShortcuts: true，time: { enabled: false }，shortcuts 3360 {/' prev-days ' :[1，3，5，7]，' next-days': [3，5，7]，/'prev' : ['周'，'月'单击此处查看时刻文档。

分隔符(字符串):日期字符串之间的分隔符。

语言(字符串):预定义的语言是“en”和“cn”。您可以使用此参数自定义语言。也可以设置为“自动”，让浏览器检测语言本身。

Startofweek(字符串):“星期日”或“星期一”。

GetValue (Function):当从DOM元素中获取日期范围，并将函数的上下文设置为datepicker DOM时，调用该函数。

SetValue(函数):当一个日期范围被写入DOM元素时，这个函数被调用。

StartDate (String或false):定义用户允许的最早日期，格式与format相同。

EndDate (String或false):定义用户允许的最后日期，格式与format相同。

天数(数字):此参数定义日期范围内的最小天数。如果设置为0，则表示对最小天数没有限制。

最大天数(数字):此参数定义日期范围内的最大天数；如果设置为0，则意味着对最大天数没有限制。

显示快捷方式(布尔值):教师或隐藏快捷方式区域。

时间(对象):如果允许该参数，将添加时间的范围选择。

快捷方式(对象):定义快捷按钮。

自定义快捷方式(数组):定义自定义快捷按钮。

内联(布尔):以内联模式而不是覆盖模式渲染日期选择器。如果设置为true，容器参数将一起设置。

容器(字符串，CSS选择器| | domobject):要呈现的日期选择器的DOM元素。

AlwaysOpen(布尔值):如果使用内联模式，您可能希望在页面加载时呈现日期选择器。将此参数设置为true会隐藏“关闭”按钮。

单一日期(布尔值):设置为true以选择单一日期。

BatchMode (false/“周”/“月”):自动批处理模式。

事件

当日期选择器在DOM中选择一个日期范围时，会触发三个事件。

$('#datepicker ').日期范围选择器()。bind('datepicker-change '，function(event，obj){ console。日志(obj)；//obj会是这样的： //{ //date1:(较早日期的日期对象)、//日期2:(较晚日期的日期对象)，//value: '2013-06-05到2013-06-07' //} })。绑定(' datepicker-apply '，函数(事件，对象){控制台。日志(obj)；}) .bind('datepicker-close '，function(){ console。日志(“关闭”)；});应用程序接口

在你调用$(dom).日期范围选择器()之后：

$(dom).数据(“日期范围选择器”).setDateRange('2013-11-20 '，' 2013-11-25 ')；//设置日期范围，在配置对象中，两个日期字符串应该跟在“格式”后面clear()；//清除日期范围close()；//关闭日期范围选择器覆盖open()；//打开日期范围选择器覆盖。销毁();//销毁所有日期范围选择器相关的东西项目地址：https://github。com/long bill/jquery-日期-范围-选取器

以上所述是小编给大家介绍的jQuery日期范围选择器附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！