bootstrap-daterangepicker

1，依赖关系

使用之前需要引用bootstrap.css daterangpicker.css jquery.js boostrap.js moment.js daterangpicker.js

可以下载到本地，若是练习使用的话，可以使用cdn （http://www.bootcdn.cn/）

2，使用

官方网站 http://www.daterangepicker.com/

中文翻译文档 http://bsify.admui.com/daterangepicker/

（1）选项

选项	类型	描述
startDate	Date 或string	日期范围的初始日期，要与“locale”设置的格式一致
endDate	Date 或string	日期范围的结束日期
minDate	Date 或string	用户可能选择的最早日期
maxDate	Date 或string	用户可能选择的最晚日期
maxSpan	Object
showDropdowns	true/false	在下拉日历框中选择年月日
minYear	Number（前提 showDropdowns为true）	在下拉日历中的最小年
maxYear	Number（前提 showDropdowns为true）	在下拉日历中的最大年限
showWeekNumbers	true/false	使用本地计算第xx周
showISOWeekNumbers	true/false	使用ISO计算周数字
timePicker	true/false	添加时间选择框
timePickerIncrement	number	时间增长范围
timePicker24Hour	true/false	24小时制
timePickerSeconds	true/false	在timePicker中显示秒
ranges	Object	设置用户能选择的日期范围（例last7 days为 May 16,2018-May 22,2018）
showCustomRangeLabel	true/false（前提，ranges已使用）	在末尾显示自定位范围
alwaysShowCalendars	true/false
opens	（‘left’/’right’/’center’）	日历出现在html元素下方的（左/右/中）的位置
drops	（‘down’/’up’）	日历出现在HTML元素的上/下（默认）位置
buttonClasses	string	被添加到apply或cancel按钮的css类名
applyButtonClasses	string	只能被添加到apply按钮的css类名
cancelButtonClasses	string	只能被添加到cancel按钮的css类名
locale	object	本地化的时间格式
singleDatePicker	true/false	只有一个日历
autoApply	true/false	隐藏apply和cancel按钮，只要选新的日期范围就立即apply
linkedCalendars	true/false	当启用时，显示的两个日历将始终是两个连续月份（即一月和二月），并且当单击日历上方的左箭头或右箭头时，两个日历都将被提前。当禁用时，两个日历可以分别提前和显示任何月份/年。
isInvalidDate	function	判断已选的日期是否有效
isCustomDate	function
autoUpdateInput	true/false	当被选的日期改变时，是否要自动更新<input>内的值
parentEl	string	将要添加日期范围选择器的父元素的jQuery选择器，如果不提供，这将是“body”。

（2）方法

方法	描述
setStartDate（Date or string）	将日期范围选择器当前选定的开始日期设置为所提供的日期
setEndDate(date or string)

（3）事件

事件	描述
show.daterangepicker	当picker显示时触发
hide.daterangepicker	当picker关闭时触发
showCalendar.daterangepicker	当日历显示时触发
hideCalendar.daterangepicker	当日历隐藏时触发
apply.daterangepicker	当apply按钮或预定义范围点击时，触发
cancel.daterangepicker	当cancel按钮点击时，触发

3，实践

参考 https://codepen.io/lunaliu/pen/QroJoV


图1	图2

4，遇到的问题

可通过https://momentjscom.readthedocs.io/en/latest/ 手册查询moment.js的相关知识

（1）图2中的年月下拉框的长度不一致，在chrome浏览器中还会出现位置不在同一高度，但是在360则没有该问题

原因：daterangepicker.css里面设置的宽度不一致，月份是56%，年是40%；

解决方法：引入新的css样式或在js里面通过querySelector（或是jquery的$().css() ）得到对应的css类，然后设置对应的值。

.daterangepicker select.monthselect, .daterangepicker select.yearselect {  padding: 5px; width:40%;border:1px solid #eee;
}

（2）会出现无效数值NaN，在chrome和360里面都有这个问题

问题出现位置：

singleDatePicker:true,opens:'right',showDropdowns:true,showWeekNumbers:true,minDate:'2000-01-01',maxDate:new Date(),  locale:{format:'YYYY-MM-DD',    daysOfWeek:['日','一','二','三','四','五','六'],monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],firstDay:7  //问题就在这个地方。}

解决方法：当把firstDay删掉（默认为0）或改成其他数字（0-6）即可。

原因：localeData.firstDayOfWeek(); // 0-6 (Sunday to Saturday) 没有7；

（3）设计要求日历初始值为空

参考： https://blog.csdn.net/qq_33518042/article/details/77175645

看了下daterangepicker的参数，可以通过设置autoUpdateInput="false"，但是input框内不会接收任何picker的值。根据上文的介绍，可以在daterangepicker.js文件里面设置该功能。

转载于:https://www.cnblogs.com/hiluna/p/9074320.html

bootstrap-daterangepicker相关推荐

daterangepicker时间插件控制起始和截至日期的选择范围
一.时间插件使用方式 1.daterangepicker.js依赖于 Bootstrap . jQuery . Moment.js 这三个库.页面中必需包含的脚本和样式文件有 <!-- 需要引用 ...
SpringMVC+Mybatis+Html5 bootStrap，SOA架构，全新UI商业运营框架
该框架为全新商业运营中的SpringMVC+Mybatis+Html5 bootStrap SOA架构 webservices 模块化框架该框架模拟大型互联网的SOA架构,做到高并发,大数据处理,整 ...
Java源码 JavaWeb开发框架代码 SSH SSM OA ERP CRM Java项目[Java通用框架源码及开发视频教程]
Java源码 JavaWeb开发框架代码 SSH SSM OA ERP CRM Java项目功能简介: A.代码生成器(开发利器) 生成Java各层次的类和JSP等文件,提高开发效率 B.阿里巴巴 ...
SpringMVC+Mybatis+Html5 JqueryUI SOA
该框架为全新商业运营中的SpringMVC+Mybatis+Html5 bootStrap SOA架构 webservices 模块化框架该框架模拟大型互联网的SOA架构,做到高并发,大数据处理,整 ...
bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
【bootstrap】使用支持bootstrap的时间插件daterangepicker
其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...
基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
bootstrap 英文日历_bootstrap日历插件DateRangePicker的使用
编辑html文件 $("#demo").daterangepicker({ "ranges" : { "今日": [moment().sta ...
php日期选择插件,优雅的日期选择插件daterangepicker
插件描述:jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择使用方法第一步:引入css文件: bootstrap.min.css.font-awesome ...
daterangepicker 使用方法总结
daterangepicker 是一个时间段选择插件.官网地址:http://www.daterangepicker.com/ 项目中需要实现如下图的效果: 1.引入该插件所需要的JS 和 CSS , ...

bootstrap-daterangepicker

bootstrap-daterangepicker相关推荐

最新文章

热门文章