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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
javascript下string.format函数补充
Aug 24 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
浅析vue数据绑定
Jan 17 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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
谈谈新手如何学习PHP
2006/12/14 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP中的float类型使用说明
2010/07/27 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
微信红包随机生成算法php版
2016/07/21 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
php中关于换行的实例写法
2019/09/26 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python中请不要再用re.compile了
2019/06/30 Python
python数据归一化及三种方法详解
2019/08/06 Python
关于python中的xpath解析定位
2020/03/06 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
企业承诺书怎么写
2014/05/24 职场文书
宣传工作经验材料
2014/06/02 职场文书
财政局个人年终总结
2015/03/03 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
python中validators库的使用方法详解
2022/09/23 Python