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中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python实现弹窗祝福效果
2019/04/07 Python
python取余运算符知识点详解
2019/06/27 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
教师新年寄语
2014/04/03 职场文书
合作经营协议书范本
2014/09/16 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
孝女彩金观后感
2015/06/10 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
DSP接收机前端设想
2022/04/05 无线电