jQuery dateRangePicker插件使用方法详解


Posted in jQuery onJuly 28, 2017

jQuery dateRangePicker插件使用总结。

版本说明:

当前使用版本:2.1.25

特别说明:版本不同,部分api可能会发生变化,需要引起重点关注

效果图

jQuery dateRangePicker插件使用方法详解

关键代码片段

$("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); 
  $("#dateTimeRange").daterangepicker({ 
    maxDate : moment(), //最大时间 
    dateLimit : { 
      days : 30 
    }, //起止时间的最大间隔 
    showDropdowns : true, 
    showWeekNumbers : false, //是否显示第几周 
    timePicker : true, //是否显示小时和分钟 
    timePickerIncrement : 60, //时间的增量,单位为分钟 
    timePicker12Hour : false, //是否使用12小时制来显示时间 
    ranges : { 
      '最近1小时': [moment().subtract(1, 'hours'), moment()], 
      '今日': [moment().startOf('day'), moment()], 
      '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')], 
      '最近7日': [moment().subtract(6, 'days'), moment()], 
      '最近30日': [moment().subtract(29, 'days'), moment()] 
    }, 
    opens : 'right', //日期选择框的弹出位置 
    buttonClasses : ['btn btn-default'], 
    applyClass : 'btn-small btn-primary blue', 
    cancelClass : 'btn-small', 
    locale : { 
      applyLabel : '确定', 
      cancelLabel : '取消', 
      fromLabel : '起始时间', 
      toLabel : '结束时间', 
      customRangeLabel : '自定义', 
      daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], 
      monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', 
        '七月', '八月', '九月', '十月', '十一月', '十二月' ], 
      firstDay : 1 
    } 
  }, function(start, end, label) { 
    // 格式化日期显示框 
    $("#dateTimeRange span").html(start.subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + end.format('YYYY-MM-DD HH:mm')); 
  });

html:

<div class="inline"> 
      <label>时间段:</label> 
      <div class="date-picker form-inline-control" id="dateTimeRange"> 
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
        <span id="searchDateRange"></span> 
        <b class="caret"></b> 
      </div> 
    </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
基于jquery实现多级菜单效果
Jul 25 #jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
You might like
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
Vue 组件注册实例详解
2019/02/23 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python 拼接文件路径的方法
2018/10/23 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python jieba库分词模式实例用法
2021/01/13 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
保安员岗位职责
2013/11/17 职场文书
工作中个人的自我评价
2013/12/31 职场文书
邮政员工辞职信
2014/01/16 职场文书
《手指教学》反思
2014/02/14 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
人与自然的观后感
2015/06/18 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java使用JMeter进行高并发测试
2021/11/23 Java/Android