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 相关文章推荐
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
javascript如何创建对象
Aug 29 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
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 cookies中删除的一般赋值方法
2011/05/07 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python如何统计序列中元素
2020/07/31 Python
Python批量发送post请求的实现代码
2018/05/05 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
资深地理教师自我评价
2013/09/21 职场文书
学术会议邀请函范文
2014/01/22 职场文书
美发店5.1活动方案
2014/01/24 职场文书
花店创业计划书范文
2014/02/07 职场文书
领导干部考察材料
2014/02/08 职场文书
学校对教师的评语
2014/04/28 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
小学安全教育主题班会
2015/08/12 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server