日期时间范围选择插件:daterangepicker使用总结(必看篇)


Posted in Javascript onSeptember 14, 2017

分享说明:

项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助。

总结分为四个部分:日期范围选择实现,日期时间选择,使用两个单日历实现范围选择,使用div代替input实现日期时间选择;下面是代码

css 代码

<style type="text/css">
 body,
 ul,
 p,
 h3,
 img,
 input {
  margin: 0;
  padding: 0;
 }

 .box {
  display: block;
  text-align: center;
  margin: 20px auto;
 }

 input {
  width: 400px;
  height: 40px;
 }

 label {
  display: inline-block;
  width: 90px;
  line-height: 40px;
  height: 40px;
  margin: 0;
  font-weight: normal;
  font-family: "宋体";
  background-color: #ddd;
 }
 .divDateSelect{
  width: 185px;
  height: 50px;
  line-height: 50px;
  margin:10px auto;
  border:2px solid #ddd;
  border-radius: 5px;
 }
 </style>

html代码:

<!-- 日期时间范围选择代码 -->
 <div class="box">
  <label for="datePicker">双日历</label>
  <input type="text" name="datePicker" class="datePicker" id="datePicker">
 </div>
 <!-- 日期时间选择代码 -->
 <div class="box">
  <label for="singledatePicker">单日历</label>
  <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker">
 </div>
 <!-- 两个单日历实现日期时间范围选择代码 -->
 <div class="box">
  <label for="from">从</label>
  <input type="text" name="from" class="from" id="from">
  <label for="to">到</label>
  <input type="text" name="to" class="to" id="to">
 </div>
 <!-- 不使用input,用div实现代码 -->
 <div class="divDateSelect" id="divDateSelect">
   <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  <span></span> <b class="caret"></b>
 </div>

js 代码,按照上下顺序对应html四部分

$('input[name="datePicker"]').daterangepicker({
  timePicker: true, //显示时间
  timePicker24Hour: true, //时间制
  timePickerSeconds: true, //时间显示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
  endDate: moment(new Date()), //设置结束器日期
  maxDate: moment(new Date()), //设置最大日期
  "opens": "center",
  ranges: {
   // '今天': [moment(), moment()],
   '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
   '上周': [moment().subtract(6, 'days'), moment()],
   '前30天': [moment().subtract(29, 'days'), moment()],
   '本月': [moment().startOf('month'), moment().endOf('month')],
   '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
   applyLabel: '确定', //确定按钮文本
   cancelLabel: '取消', //取消按钮文本
   customRangeLabel: '自定义',
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, function(start, end, label) {
  timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
  console.log(timeRangeChange);
 });
$('input[name="singledatePicker"]').daterangepicker({
  "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
  singleDatePicker: true, //单日历
  showDropdowns: true, //年月份下拉框
  timePicker: true, //显示时间
  timePicker24Hour: true, //时间制
  timePickerSeconds: true, //时间显示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
  maxDate: moment(new Date()), //设置最大日期
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
   applyLabel: '确定', //确定按钮文本
   cancelLabel: '取消', //取消按钮文本
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, function(start) {
  console.log(start.format('YYYY-MM-DD HH:mm:ss'));
 });
var minDate = null;
 var max = null;
 function fromDate(maxDate) {
  if(!maxDate){
   max = moment(new Date())
  }else{
   max = maxDate;
  }
  $('input[name="from"]').daterangepicker({
   "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
   singleDatePicker: true, //单日历
   showDropdowns: true, //年月份下拉框
   timePicker: true, //显示时间
   timePicker24Hour: true, //时间制
   timePickerSeconds: true, //时间显示到秒
   // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
   maxDate: max , //设置最大日期
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
    applyLabel: '确定', //确定按钮文本
    cancelLabel: '取消', //取消按钮文本
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
     '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    firstDay: 1
   },
  }, function(s) {
   toDate(s);
  });
 }
 fromDate()
 function toDate(minDate) {
  $('input[name="to"]').daterangepicker({
   "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
   singleDatePicker: true, //单日历
   showDropdowns: true, //年月份下拉框
   timePicker: true, //显示时间
   timePicker24Hour: true, //时间制
   timePickerSeconds: true, //时间显示到秒
   // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
   maxDate: moment(new Date()), //设置最大日期
   minDate: minDate,
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
    applyLabel: '确定', //确定按钮文本
    cancelLabel: '取消', //取消按钮文本
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
     '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    firstDay: 1
   },
  }, function(s) {
   fromDate(s)
  });
 }
 toDate();
var start = moment(new Date());
 function cb(start) {
  $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 $('#divDateSelect').daterangepicker({
  "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false
  singleDatePicker: true, //单日历
  showDropdowns: true, //年月份下拉框
  // timePicker: true, //显示时间
  timePicker24Hour: true, //时间制
  timePickerSeconds: true, //时间显示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
  maxDate: moment(new Date()), //设置最大日期
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
   applyLabel: '确定', //确定按钮文本
   cancelLabel: '取消', //取消按钮文本
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, cb);
 cb(start);

效果图:

第一部分:

日期时间范围选择插件:daterangepicker使用总结(必看篇)

第二部分:

日期时间范围选择插件:daterangepicker使用总结(必看篇)

第三部分就是两个第二部分组实现第一部分的效果;原理为在确定好开始日期后;设置选择结束日期日历的最小选择日期;在结束日期选中后;设置开始日期的最大选择日期;

第四部分:

日期时间范围选择插件:daterangepicker使用总结(必看篇)

关键选项的含义已经在代码中注释了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;

备注:

1 moment.js使用了数组的indexOf()方法;但IE8不支持;需要引入兼容代码;代码地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

在polyfill下;

2 在IE8下;双日历的范围选择出现连个日历竖直排列问题;解决方法为给存放两个日历的盒子设置固定的宽度,足以放下两个日历的div;再把两个日历的div设置float:left即可;

3 官网地址;选项设置: http://www.daterangepicker.com/#options

例子: http://www.daterangepicker.com/#examples

4 希望本文能够帮助初识daterangepicker的朋友.

以上这篇日期时间范围选择插件:daterangepicker使用总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
js 窗口抖动示例
Sep 04 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 #Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 #Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 #Javascript
基于node.js express mvc轻量级框架实践
Sep 14 #Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 #Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 #Javascript
基于js中document.cookie全面解析
Sep 14 #Javascript
You might like
php UNIX时间戳用法详解
2017/02/16 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
Python实现的弹球小游戏示例
2017/08/01 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Django开发中复选框用法示例
2018/03/20 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
信息技术培训感言
2014/03/06 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
前台接待员岗位职责
2015/04/15 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python基于机器学习预测股票交易信号
2021/05/25 Python
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP