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

分享说明:

项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了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);

效果图:

第一部分:

第二部分:

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

第四部分:

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

时间: 2017-09-11

Bootstrap datepicker日期选择器插件使用详解

bootstrap是与jquery.js文件一起结合起来一起用的,缺少任何一个文件都不可以. datepicker插件一般用于在文本框中选择日期,通过在表中选择日期,从而将日期显示在文本框中.因为datepicker.js默认是英文的,如果需要显示中文日期,则需要引入该插件的中文包. 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&

Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script

Jquery日期选择datepicker插件用法实例分析

本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

jQuery dateRangePicker插件使用方法详解

jQuery dateRangePicker插件使用总结. 版本说明: 当前使用版本:2.1.25 特别说明:版本不同,部分api可能会发生变化,需要引起重点关注 效果图 关键代码片段 $("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); $("#dateTimeRa

基于daterangepicker日历插件使用参数注意的问题

显示具体时间时分秒: timePicker设置为true,//有些资料写的pickerTime不太对 重点大坑:修改时间默认展示格式,把fomat写在locale中,网上很多资料说直接写在daterangepicker属性中,这样是不生效的. 起止时间可以设置为具体年月日也可以生成当前日期(new Date()  或者 moment()[moment()方法为moment.js获取当前时间的函数]) $("#dateid").daterangepicker({ startDate: m

浅谈Bootstrap的DatePicker日期范围选择

用日期插件时,经常会有一种需求.两个input框选择.开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间. 我们当然可以用选择的结果来判断输入正确与否.但是更好的办法是让我们的日期选择插件做出一些限制. Bootstrap搭配了很优秀的日期选择插件.DatePicker和DateTimePicker. 两者功能很类似.使用方法也是差不多的.DatePicker支持更多的事件和设置. 看api知道日期变化的时候会有一个事件changeDate.当选择的日期变化的时候,会

bootstrap daterangepicker双日历时间段选择控件详解

双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定.我们项目里用到的Bootstrap版本是2.3.1,所以我把daterangepicker与Bootstrap-2.3.1进行了整合. 一.需要引入的css与js  <link href="bootstrap.min.css" rel="stylesheet&q

Android ToolBar控件详解及实例

ToolBar控件详解 在Activity中添加ToolBar 1.添加库 dependencies { ... compile "com.android.support:appcompat-v7:18.0.+" } 2.Activity要继承AppCompatActivity 3.设置主题 使用ToolBar,要将系统默认的ActionBar隐藏掉 <application android:theme="@style/Theme.AppCompat.Light.NoA

Android Tab 控件详解及实例

Android Tab 控件详解及实例 在桌面应用中Tab控件使用得非常普遍,那么我们经常在Android中也见到以Tab进行布局的客户端.那么Android中的Tab是如何使用的呢? 1.Activity package com.wicresoft.activity; import com.wicresoft.myandroid.R; import android.app.TabActivity; import android.os.Bundle; import android.util.Lo

WPF自定义选择年月控件详解

本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Client.DateMonthPicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micr

微信小程序 input输入框控件详解及实例(多种示例)

微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

Android使用属性动画如何自定义倒计时控件详解

为什么要引入属性动画? Android之前的补间动画机制其实还算是比较健全的,在android.view.animation包下面有好多的类可以供我们操作,来完成一系列的动画效果,比如说对View进行移动.缩放.旋转和淡入淡出,并且我们还可以借助AnimationSet来将这些动画效果组合起来使用,除此之外还可以通过配置Interpolator来控制动画的播放速度等等等等.那么这里大家可能要产生疑问了,既然之前的动画机制已经这么健全了,为什么还要引入属性动画呢? 其实上面所谓的健全都是相对的,如

iOS开发之UIScrollView控件详解

一.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 二.UIScrollView的简单使用 (

Javascript 遍历页面text控件详解

以下函数实现了列出页面中所有html控件类型为text的控件ID 复制代码 代码如下: function Texts()         {              //var els= document.getElementsByTagName("*");   //els得到页面所有控件              var els= document.getElementsByTagName("INPUT"); //上面的也可,这样可以减少循环          

C# winform自定义翻页控件详解

C#  winform中自定义的翻页控件,自己设计,供大家参考,具体内容如下 1.主要是使用控件绑定点击事件   用到的控件分别为picturebox   lable  上一页pbPage_Prev    下一页 pbPage_Next  首页 pbPage_Begin   尾页pbPage_End  是picturebox控件加背景图 "第  页/ 共  页" 是一个lable "labPageInfo"    在lable上面加了一个隐藏的textbox 控件

Android实现自定义轮播图片控件详解

首先上效果图 实现原理 要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 一.创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import andro