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 实用的文字链提示框效果
Jun 30 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
一道python走迷宫算法题
2018/01/22 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python数组并集交集补集代码实例
2020/02/18 Python
简单了解Python write writelines区别
2020/02/27 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python开根号实例讲解
2020/08/30 Python
.NET概念性的面试题
2012/02/29 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
《燕子》教学反思
2014/02/18 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
优秀护士演讲稿
2014/04/30 职场文书
组工干部演讲稿
2014/09/02 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python