bootstrap中日历范围选择插件daterangepicker的使用详解


Posted in Javascript onApril 17, 2018

daterangepicker是bootstrap的一个日历插件 主要用来选择时间段的插件 这个插件很好用 也很容易操作

bootstrap中日历范围选择插件daterangepicker的使用详解
bootstrap中日历范围选择插件daterangepicker的使用详解 

 引入相关插件

<!-- 需要引用的依赖库 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" rel="external nofollow" />
<!-- 引用 daterangepicker 相关文件-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="external nofollow" />

需要的元素添加该插件的调用方法:

$('input[name="daterange"]').daterangepicker();

您可以通过参数自定义相关配置,还可以通过回调函数在用户选择新的日期时获得通知。

$('input[name="daterange"]').daterangepicker({
    locale: {
     format: 'YYYY-MM-DD'
    },
    startDate: '2013-01-01',
    endDate: '2013-12-31'
  },
  function(start, end, label) {
    alert("A new date range was chosen: " + start.format    ('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });

其中这些配置可以组成一个配置为文件 然后再()中引入

$('input[name=dateStr]', '#themeAddPage').daterangepicker(dateRangePickerAfterTodayConfig);

配置文件

var dateLongRangePickerOptionObj = {
  minDate: '2015/01/01 00:00:00',  //最小时间
  showDropdowns: true,
  showWeekNumbers: false, //是否显示第几周
  dateLimit: {days: 300}, //起止时间的最大间隔
  timePicker: true,
  timePickerIncrement: 1, //时间的增量,单位为分钟
  timePicker12Hour: false,
  opens: 'right', //日期选择框的弹出位置
  buttonClasses: ['btn btn-default'],
  applyClass: 'btn-small btn-primary blue',
  cancelClass: 'btn-small',
  format: 'YYYY/MM/DD HH:mm:ss', //控件中from和to 显示的日期格式MM/DD/YYYY
  separator: '-',
  defaultDate: new Date(),
  locale: {
    applyLabel: '确定',
    cancelLabel: '取消',
    fromLabel: '起始时间',
    toLabel: '结束时间',
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    firstDay: 1
  }
}

配置选项,方法和事件

配置选项

startDate: (Date 对象, moment 对象或者string类型)初始化日期范围选中的开始时间。
endDate: (Date 对象, moment 对象或者string类型)初始化日期范围选中的结束时间。
minDate: (Date 对象, moment 对象或者string类型) 用户可以选择的最早时间。
maxDate: (Date 对象, moment 对象或者string类型) 用户可以选择的最晚时间。
dateLimit: (object类型) 选中的开始和结束日期之间最大时间间隔。可以是能够添加到moment对象(moment.add())中的任何属性(如:days, months)。
showDropdowns: (boolean类型) 在日历上面显示年和月的下拉框,选中后将跳到指定的年和月
showWeekNumbers: (boolean类型) 在日历上每周开始的地方显示本地化的周编号。
showISOWeekNumbers: (boolean类型) 在日历上每周开始的地方显示国际标准的周编号。
timePicker: (boolean类型) 允许选择日期和时间,而不是局限于日期。
timePickerIncrement: (number类型) 时间选择框中分钟列的增加步长(如:设置为30后只允许选择以0和30结束的时间)。
timePicker24Hour: (boolean类型) 使用24小时制来代替12小时制,同时删除AM/PM选择框。
timePickerSeconds: (boolean类型) 在时间选择框中显示秒选择列。
ranges: (object类型) 设置用户可以选择的预定义日期范围。每个键名即范围的标签名,对应值是两个日期组成的数组,来表示范围的界限。
showCustomRangeLabel: (boolean类型) 当使用范围选项时,在预定义范围列表的末尾显示标记为"Custom Range"的标签。当选择的日期范围与任何一个预定义的范围都不匹配时,该选项将被高亮显示。单击它显示日历可以选择新的范围。
alwaysShowCalendars: (boolean类型) 通常,如果使用范围选项指定了预定义日期范围,则用户除了单击 "Custom Range"之外,日期选择器都不会显示用于选择自定义日期范围的日历。当选项设置为true时,将始终显示用于选择自定义日期范围的日历。
opens: (string: 'left'/'right'/'center') 设置日期选择器以绑定元素左对齐、右对齐或者居中显示。
drops: (string: 'down' or 'up') 设置日期选择器在绑定元素的下面(默认)或者上面显示。
buttonClasses: (array类型)为日期选择器中的所有button元素添加CSS类。
applyClass: (string类型) 为日期选择器中的apply按钮添加类。
cancelClass: (string类型) 为日期选择器中的cancel按钮添加类。
locale: (object类型) 允许为按钮和标签提供本地化的字符串,自定义日期格式,并更改日历中周的第一天。 查看配置生成器中的“locale配置(包含设置示例)”,以了解如何自定义这些选项。
singleDatePicker: (boolean类型) 只显示一个日历来选择一个日期,而不是带有两个日历的范围选择器;回调函数中提供的开始和结束日期将和选择的单个日期相同。
autoApply: (boolean类型) 隐藏apply和cancel按钮。选择两个日期或预定义范围时,会自动应用新的日期范围。
linkedCalendars: (boolean类型) 启用时,显示的两个日历将始终为两个连续的月份(如:1月和2月),并且当单击日历上方的左侧或右侧箭头时,两个日历都将变化。 禁用时,两个日历可以单独变化并显示任何月/年。
isInvalidDate: (function类型) 在显示两个日历之前传递一个日期参数,然后通过返回true或false,标示该日期是否可供选择。
isCustomDate: (function类型) 在显示两个日历之前传递一个日期参数,然后将返回的CSS类名字符串传或者数组应用在日历中的该日期上。
autoUpdateInput: (boolean类型) 标示日期范围选择器是否应在初始化和所选日期改变时,自动更新绑定在<input>元素上的值。
parentEl: (string类型) 给日期选择器添加父元素的jQuery选择器,如果没有提供,body将被作为父元素。

方法

您可以使用setStartDate和setEndDate方法以程序化的方式更新日期选择器中的startDate和endDate。 您也可以通过绑定到该元素上的data属性访问日期范围选择器对象及其功能和属性。

setStartDate(Date 对象, moment 对象或者string类型): 设置日期范围选择器中当前选择的开始日期为提供的日期 setEndDate(Date 对象, moment 对象或者string类型): 设置日期范围选择器中当前选择的结束日期为提供的日期

示例用法:

// 创建一个新的日期范围选择器
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });
// 改变日期选择器中选中的日期范围
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

事件

日期选择器绑定的元素可以触发以下几个事件,这些事件,您都可以进行监听。

show.daterangepicker: 日期选择器显示后触发事件 hide.daterangepicker: 日期选择器隐藏后触发事件 showCalendar.daterangepicker: 日历显示后触发事件 hideCalendar.daterangepicker: 日历隐藏后触发事件 apply.daterangepicker: apply按钮被点击,或者预定义范围标签被点击时触发事件 cancel.daterangepicker: cancel按钮被点击时

触发事件

有些应用需要“清除”而不是“取消”功能,这可以通过更改按钮标签监听cancel事件来实现:

$('#daterange').daterangepicker({
 locale: { cancelLabel: 'Clear' }
});
$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
 $('#daterange').val('');
});

向构造函数传一个回调函数作为参数是监听所选日期范围更改最简单的方法 ,即使选择未更改,每次应用按钮被点击时,您也可以执行某些操作:

$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
 console.log(picker.startDate.format('YYYY-MM-DD'));
 console.log(picker.endDate.format('YYYY-MM-DD'));
});

总结

以上所述是小编给大家介绍的bootstrap中日历范围选择插件daterangepicker的使用详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
Vue 项目代理设置的优化
Apr 17 #Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 #Javascript
vue iview实现动态路由和权限验证功能
Apr 17 #Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 #Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 #Javascript
js闭包学习心得总结
Apr 17 #Javascript
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
python中元类用法实例
2014/10/10 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python3 线性回归验证方法
2019/07/09 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
北承题目(C++)
2012/05/16 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
财务内勤岗位职责
2014/04/17 职场文书
建筑安全生产责任书
2014/07/22 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2015年度党员个人总结
2015/02/14 职场文书
公司地址变更通知
2015/04/25 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
导游词之青岛崂山
2019/12/27 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL