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文件里面设置该功能。
bootstrap-daterangepicker的更多相关文章
- 修复bootstrap daterangepicker中的3个问题
最近项目中使用了一个基于Bootstrap的daterangepicker控件. 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上. 具体描述: 1.点击打开日期选择框 2.选择一个日期范 ...
- BootStrap dateRangePicker时间范围控件
BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...
- bootstrap daterangepicker 添加阴历及节假日
所有的新增都用 'myAdd start'和'myAdd end'标注,所有的修改都用'myChange start'和'myChange end'标注. 借用了 1900-2100区间内的公历.农历 ...
- daterangepicker+ bootstrap +php +ajax +datatable双日历的使用
在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...
- 【bootstrap】时间选择器datetimepicker和daterangepicker
在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel= ...
- 基于bootstrap的双日历插件 daterangepicker
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 【bootstrap】使用支持bootstrap的时间插件daterangepicker
其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...
- 基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
随机推荐
- Django2 外键遇到的坑
# 出版社 class Publisher(models.Model): # 自增.主键 id id = models.AutoField(primary_key=True) # varchar(32 ...
- [bzoj3926] [loj2137] [Zjoi2015] 诸神眷顾的幻想乡
Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...
- 「 从0到1学习微服务SpringCloud 」01 一起来学呀!
有想学微服务的小伙伴没?一起来从0开始学习微服务SpringCloud,我会把学习成果总结下来,供大家参考学习,有兴趣可以一起来学!如有错误,望指正! Spring .SpringBoot.Sprin ...
- 【原创】(一)Linux进程调度器-基础
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- 【模板】普通平衡树(权值splay)
安利splay讲解: [洛谷日报第62期]Splay简易教程 [模板]普通平衡树(luogu) Description 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下 ...
- excle 写入数据库
龙龙博客:https://www.cnblogs.com/meilong/p/cao-zuoexcel-mo-kuaiopenpyxl.html 1 安装 pip install openpyxl 如 ...
- ubuntu18.04编译jdk8
准备编译环境 sudo apt-get install -y zip unzip build-essential libx11-dev libxext-dev libxrender-dev libxt ...
- apache 目录网站显示indexs
Apache Options Indexes FollowSymLinks详解 第一种方法 <Directory "E:\myvirtualhost\localhost"&g ...
- MySQL8.0 MIC高可用集群搭建
mysql8.0带来的新特性,结合MySQLshell,不需要第三方中间件,自动构建高可用集群. mysql8.0作为一款新产品,其内置的mysq-innodb-cluster(MIC)高可用集群的技 ...
- The import java.io cannot be resolved (类库无法解析的问题解决 )
导入一个新项目后常会出现 The import java.io cannot be resolved String cannot be resolved to a type 其原因在于没有导入需要的包 ...