bootstrap时间插件daterangepicker使用详解


Posted in Javascript onOctober 19, 2017

本文实例为大家分享了bootstrap时间插件daterangepicker的具体代码,供大家参考,具体内容如下

插件下载地址:https://github.com/dangrossman/bootstrap-daterangepicker

头部引入文件:

<link href=”http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” type=”text/css” media=”all” href=”daterangepicker.css” />
<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js“></script>
<script type=”text/javascript” src=”http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js“></script>
<script type=”text/javascript” src=”moment.js“></script>
<script type=”text/javascript” src=”daterangepicker.js“></script>

相关配置:

$('#startDate').daterangepicker({  //绑定input元素 id="startDate"
     "startDate": "08/07/2015 - 08/17/2015", //默认选择开始时间
     "endDate": "08/17/2015", //默认选择结束时间
     //singleDatePicker: true, //显示单个日历表
     //"timePicker": true, //开启时、分
     //"showWeekNumbers": true, //显示第几周
     //"timePicker24Hour": true, //开启24小时制
     startDate: moment().subtract(10, 'days'), //两个时间相隔时间
     "showDropdowns": true, //开启年月的选择
     ranges : { //快捷选择时间
      '最近1小时': [moment().subtract('hours',1), moment()], 
      '今日': [moment(), moment()], 
      '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')], 
      '最近7日': [moment().subtract('days', 6), moment()], 
      '最近30日': [moment().subtract('days', 29), moment()] 
     },
     locale : { //中文汉化
      applyLabel : '确定', 
      cancelLabel : '取消', 
      fromLabel : '起始时间', 
      toLabel : '结束时间', 
      customRangeLabel : '自定义', 
      daysOfWeek : ['日','一','二','三','四','五','六'], 
      monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ], 
      firstDay : 1 
     },
     // "opens": "left", //日历表的位置
     // "drops": "up", //日历表的位置
     // "buttonClasses": "button", //日历表"确定"按钮类名
     // "applyClass": "hover", //日历表"确定"按钮类名
     // "cancelClass": "cancel" //日历表"取消"按钮类名
  });

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

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 #Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 #Javascript
微信小程序支付之c#后台实现方法
Oct 19 #Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 #Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 #Javascript
微信小程序的生命周期的详解
Oct 19 #Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 #Javascript
You might like
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScript Split()方法
2015/12/18 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python队列的定义与使用方法示例
2017/06/24 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
python的数学算法函数及公式用法
2020/11/18 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
装饰活动策划方案
2014/02/11 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
法人委托书范本
2014/09/15 职场文书
平面设计师岗位职责
2014/09/18 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android