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 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
php抓即时股票信息
2006/10/09 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php格式化金额函数分享
2015/02/02 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Python正则表达式常用函数总结
2017/06/24 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python使用tornado实现登录和登出
2018/07/28 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python turtle 绘制太极图的实例
2019/12/18 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
爱祖国演讲稿
2014/05/04 职场文书
昆虫记读书笔记
2015/06/26 职场文书
详解python网络进程
2021/06/15 Python