插件官方网站地址

bootstrap-daterangepicker是个很方便的插件,但是对我这种菜鸟来说,文档不够详细,摆弄了好久才整好。记录下来供以后参考,也希望能帮到有需要的朋友。

目前版本是2.1.25,以下使用方法均相当于此版本。

1. 所需静态文件

  • jquery@1.11.3_2
  • bootstrap@3.3.4
  • momentjs:moment@2.10.3
  • daterangepicker.js
  • daterangepicker.css

我一开始自己用的是bootstrap 4,jquery也用的最新版本,出来很多错误,暂时先改到文档中要求的版本。

将这些文件引入到网页中。

2. 定制

在官方网站上可以根据自己的需要定制并预览选择器。下面是各种选项:

每种选项的变化都可以在下面的选择器中预览,点击弹出窗口就可看到效果:

同时生成了代码在这个框中,这些代码后面要用到:

3. html代码

html代码可以多种多样,我用一个最简单的结合了bootstrap样式的输入框:

<div class="col-sm-4 input-group" id="date-picker">
<span class="input-group-addon" id="basic-addon">日期范围</span>
<input type = "text" id="date-range" class="form-control">
<i id="calendar-icon" class="fa fa-calendar"></i>
</div>

4. 加入js代码

在body的最后,加入以下js代码:

<script type = "text/javascript">
$(document).ready(function () {
$('#date-range').daterangepicker({
"showDropdowns": true,
"showISOWeekNumbers": true,
"ranges": {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'近一周': [moment().subtract(6, 'days'), moment().subtract(6, 'days')],
'近一个月': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}, "locale": {
"format": "YYYY/MM/DD",
"separator": " - ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "从",
"toLabel": "到",
"customRangeLabel": "自定义",
"weekLabel": "周",
"daysOfWeek": [
"日",
"一",
"二",
"三",
"四",
"五",
"六"
],
"monthNames": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"firstDay": 1
},
"alwaysShowCalendars": true,
"startDate": moment().subtract(6, 'days'),
"endDate": moment(),
"minDate": "2017年01月01日",
"linkedCalendars": false,
"maxDate": "2019年12月31日"
}, function (start, end, label) {
console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
});
</script>

.daterangepicker后面的内容就是前面第二步最后自定义选项生成的代码。其中"ranges"选项需要修改成上面代码中这种动态的日期,不要用网站中选项生成的固定日期。
其中"locale"字典中是汉化内容。

5. 遇到的坑

1. 没有把ranges选项中的日期改成动态的,用的直接复制过来的日期,一直显示无效;

2. 设置maxDate和minDate时的默认格式为MM/DD/YYYY,前面locale里想设置成YYYY-MM-DD,结果总是无效;可以设置成MM-DD-YYYY或者MM-DD,YYYY,但就是不能设置成年份在最前面。后来将maxDate和minDate选项的数据也改成YYYY-MM-DD格式,才终于解决了问题。

3. 月份汉化以后,月份选择框和年份选择框垂直方向不对齐,看着非常别扭。在font-family最后加入"宋体",问题解决(我用的chorme,不知道其他浏览器能不能解决)。

6.最终效果

如果帮到你了,请帮忙点赞! :-)

bootstrap日期范围选择插件daterangepicker详细使用方法的更多相关文章

  1. 日期时间范围选择插件:daterangepicker使用总结

    分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...

  2. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  3. bootstrap_bootstrap中日历范围选择插件daterangepicker的使用

    1.引入脚本 <link rel="stylesheet" type="text/css" href="assets/css/bootstrap ...

  4. 基于zepto的一个日期区间选择插件

    功能:类似去哪选日期的那个日历,选第二个日期关闭日历,https://github.com/zhangchen2397/calendar在这个插件基础上改哒,这个只能选一个日期,我加了选两个日期的.并 ...

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

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

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

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

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

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

  8. Bootstrap日期/日历插件Datepicker 时间加标记

    由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...

  9. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

随机推荐

  1. MySQL的安装、改密及远程连接

    一.下载MySQL压缩包后的安装步骤 将压缩包解压到指定的目录 编辑好配置文件 [mysql] #设置MySQL客户端默认字符集 default-character-set=utf8 [mysqld] ...

  2. docker部署 springboot 多模块项目+vue

    之前学习了docker,今天就来试试将这个项目打包成docker镜像并通过运行一个镜像来运行项目.这里使用的项目是el-admin.是一个开源的springboot后端管理框架(前端vue),有兴趣的 ...

  3. JavaHomeWorkList

    3.17 关键词:剪刀石头布:随机数 1 import java.util.Scanner; 2 public class JSB { 3 public static void main(String ...

  4. A - 欧拉回路

    欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input测试输入包含若干测试用例.每个测试用例的第1行给出两个正整数,分别是节点数N ...

  5. Codeforces Round #658 (Div. 2) D. Unmerge(dp)

    题目链接:https://codeforces.com/contest/1382/problem/D 题意 给出一个大小为 $2n$ 的排列,判断能否找到两个长为 $n$ 的子序列,使得二者归并排序后 ...

  6. Codeforces Global Round 8 D. AND, OR and square sum(位运算)

    题目链接:https://codeforces.com/contest/1368/problem/D 题意 给出一个大小为 $n$ 的数组 $a$,每次可以选两个下标不同的元素,一个赋为二者相与的值, ...

  7. 【bzoj 3433】{Usaco2014 Jan} Recording the Moolympics(算法效率--贪心)

    题意:给出n个区间[a,b),有2个记录器,每个记录器中存放的区间不能重叠.求2个记录器中最多可放多少个区间. 解法:贪心.只有1个记录器的做法详见--关于贪心算法的经典问题(算法效率 or 动态规划 ...

  8. Codeforces Round #646 (Div. 2) E. Tree Shuffling dfs

    题意: 给你n个节点,这n个节点构成了一颗以1为树根的树.每一个节点有一个初始值bi,从任意节点 i 的子树中选择任意k个节点,并按他的意愿随机排列这些节点中的数字,从而产生k⋅ai 的成本.对于一个 ...

  9. AtCoder Beginner Contest 177 D - Friends (并查集)

    题意:有\(n\)个人,给你\(m\)对朋友关系,朋友的朋友也是朋友,现在你想要将他们拆散放到不同的集合中,且每个集合中的人没有任何一对朋友关系,问最少需要多少集合. 题解:首先用并查集将朋友关系维护 ...

  10. Python——requests模块

    一.安装模块 pip install requests 二.引用 import requests 三.get方法 #GET访问页面 r = requests.get(url) print(r.text ...