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的更多相关文章

  1. 修复bootstrap daterangepicker中的3个问题

    最近项目中使用了一个基于Bootstrap的daterangepicker控件. 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上. 具体描述: 1.点击打开日期选择框 2.选择一个日期范 ...

  2. BootStrap dateRangePicker时间范围控件

    BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...

  3. bootstrap daterangepicker 添加阴历及节假日

    所有的新增都用 'myAdd start'和'myAdd end'标注,所有的修改都用'myChange start'和'myChange end'标注. 借用了 1900-2100区间内的公历.农历 ...

  4. daterangepicker+ bootstrap +php +ajax +datatable双日历的使用

    在练习基于bootstrap   datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...

  5. 【bootstrap】时间选择器datetimepicker和daterangepicker

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件:   需要的文件: <link rel= ...

  6. 基于bootstrap的双日历插件 daterangepicker

    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...

  7. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  8. bootstrap之双日历时间段选择控件—daterangepicker(汉化版)

    jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...

  9. 【bootstrap】使用支持bootstrap的时间插件daterangepicker

    其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...

  10. 基于bootstrap的时间选择插件daterangepicker以及汉化方法

    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...

随机推荐

  1. Django2 外键遇到的坑

    # 出版社 class Publisher(models.Model): # 自增.主键 id id = models.AutoField(primary_key=True) # varchar(32 ...

  2. [bzoj3926] [loj2137] [Zjoi2015] 诸神眷顾的幻想乡

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...

  3. 「 从0到1学习微服务SpringCloud 」01 一起来学呀!

    有想学微服务的小伙伴没?一起来从0开始学习微服务SpringCloud,我会把学习成果总结下来,供大家参考学习,有兴趣可以一起来学!如有错误,望指正! Spring .SpringBoot.Sprin ...

  4. 【原创】(一)Linux进程调度器-基础

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  5. 【模板】普通平衡树(权值splay)

    安利splay讲解: [洛谷日报第62期]Splay简易教程 [模板]普通平衡树(luogu) Description 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下 ...

  6. excle 写入数据库

    龙龙博客:https://www.cnblogs.com/meilong/p/cao-zuoexcel-mo-kuaiopenpyxl.html 1 安装 pip install openpyxl 如 ...

  7. ubuntu18.04编译jdk8

    准备编译环境 sudo apt-get install -y zip unzip build-essential libx11-dev libxext-dev libxrender-dev libxt ...

  8. apache 目录网站显示indexs

    Apache Options Indexes FollowSymLinks详解 第一种方法 <Directory "E:\myvirtualhost\localhost"&g ...

  9. MySQL8.0 MIC高可用集群搭建

    mysql8.0带来的新特性,结合MySQLshell,不需要第三方中间件,自动构建高可用集群. mysql8.0作为一款新产品,其内置的mysq-innodb-cluster(MIC)高可用集群的技 ...

  10. The import java.io cannot be resolved (类库无法解析的问题解决 )

    导入一个新项目后常会出现 The import java.io cannot be resolved String cannot be resolved to a type 其原因在于没有导入需要的包 ...