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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
开发一个封装iframe的vue组件
Mar 29 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
很好用的PHP数据库类
2009/05/27 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Django 实现图片上传和下载功能
2020/12/31 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
晚宴邀请函范文
2014/01/15 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
新员工考核评语
2014/12/31 职场文书
工作保证书怎么写
2015/02/28 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android