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树插件zTree使用方法详解
May 02 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 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框架的性能
2008/01/10 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
用python制作游戏外挂
2018/01/04 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python实现图像识别功能
2018/01/29 Python
Python绘制股票移动均线的实例
2019/08/24 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
法律系毕业生自荐信范文
2014/03/27 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
停发工资证明范本
2015/06/12 职场文书
教师节简报
2015/07/20 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技