欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 07:57:36
分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在iie8第一次点击会报设置格式错误;研究了很...

分享说明:

项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了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使用总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。