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

分享说明：

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

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

css 代码

rush:xhtml;">

HTML代码:

rush:xhtml;">

Box">

Box">

Box">

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

rush:xhtml;"> $('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,'前30天': [moment().subtract(29,'本月': [moment().startOf('month'),moment().endOf('month')],'上月': [moment().subtract(1,'month').startOf('month'),'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); });

rush:xhtml;"> $('input[name="singledatePicker"]').daterangepicker({ "autoApply": true,//选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true,//单日历 showDropdowns: true,//年月份下拉框 timePicker: true,//设置开始日期 maxDate: moment(new Date()),//取消按钮文本 daysOfWeek: ['日',function(start) { console.log(start.format('YYYY-MM-DD HH:mm:ss')); });

rush:xhtml;"> 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",locale: { format: "YYYY-MM-DD HH:mm:ss",//设置显示格式 applyLabel: '确定',//确定按钮文本 cancelLabel: '取消',//取消按钮文本 daysOfWeek: ['日','十二月' ],firstDay: 1 },function(s) { toDate(s); }); } fromDate() function toDate(minDate) { $('input[name="to"]').daterangepicker({ "autoApply": true,//设置开始日期 maxDate: moment(new Date()),//设置最大日期 minDate: minDate,"opens": "center",function(s) { fromDate(s) }); } toDate();

rush:xhtml;"> var start = moment(new Date()); function cb(start) { $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss')); } $('#divDateSelect').daterangepicker({ "autoApply": true,//年月份下拉框 // timePicker: true,cb); cb(start);

效果图:

第一部分:

第二部分:

第三部分

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

第四部分:

关键选项的含义已经在代码中注释了;引入文件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使用总结(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗

前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...

nice-validator表单验证插件的简单使用

前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...

基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

前言 图片上传是web项目常见的需求，我基于之前的博客的代码...

踹掉后端，前端导出Excel！

前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...

Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量

前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...

select标签 禁止选择但又能通过序列化form表单传值到后台

前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...