jQuery日期范围选择器附源码下载


Posted in jQuery onMay 23, 2017

jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤。而且浏览器兼容性非常好,支持多种时间格式。

jQuery日期范围选择器附源码下载

查看演示             下载源码

准备

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

<link rel="stylesheet" href="css/daterangepicker.css" rel="external nofollow" /> 
<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

项目地址:https://github.com/longbill/jquery-date-range-picker

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

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现评论模块
Aug 19 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
jquery实现图片轮播器
May 23 #jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
python开发之list操作实例分析
2016/02/22 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python中logging日志库实例详解
2020/02/19 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
phpquery中文手册
2021/03/18 PHP
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
副总经理工作职责
2013/11/28 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers