bootstrap日期插件daterangepicker使用详解


Posted in Javascript onOctober 19, 2017

今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得:
插件开源地址:daterangepicker日期控件,
插件使用只要按照开源中的文档信息来就好先包括以下引用:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

包含对jquery,bootstrap框架的引用,以及日期处理用的moment.js,最后加载上这个插件的js和css文件
然后和大部分jq插件一样,该插件也是对$.fn的扩展所以进行以下的操作来使用这个控件

<script type="text/javascript">
$(document).ready(function() {
 $('input[name="daterange"]').daterangepicker();
});
</script>

用jq获取到你要插入的那个元素然后运行daterangepicker函数就能使用它默认的样式和属性了,
不过光有这个肯定是不行的,daterangepicker函数可以接受一个参数对象和一个回调函数,如下:

$('input[name="daterange"]').daterangepicker(
 { 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: '2013-12-31'
 },
 function(start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 }
);

回调函数会在日期更改之后触发有三个参数,开始时间,结束时间以及标签名,可以在这里执行你要进行的操作如ajax请求

以上就可以构建一个英文版的日期控件了

bootstrap日期插件daterangepicker使用详解

接下来着重介绍一下locale和ranges两个参数

首先是locale这个参数locale是构建本地语言应用的重要参数(github上说locale接受对象参数,不过并没有说明对象的属性)

以下是插件中locale默认属性

{ 
applyLabel: ‘Apply', 
cancelLabel: ‘Cancel', 
fromLabel: ‘From', 
toLabel: ‘To', 
weekLabel: ‘W', 
customRangeLabel: ‘Custom Range', 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

我们只有更改这些参数就能够使这个插件变成中文的插件

$('input[name=datetime]').daterangepicker({ 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: '确认',
      cancelLabel: '取消',
      fromLabel: '从',
      toLabel: '到',
      weekLabel: 'W',
      customRangeLabel: 'Custom Range',
      daysOfWeek:["日","一","二","三","四","五","六"],
      monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    }
  }, function (start, end, label) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });

效果如下:

bootstrap日期插件daterangepicker使用详解

当然你可能也许想实现github中的那个效果,想加个添加时间的快捷键:
Improvely.com
没问题可以使用range参数实现:
range参数也是对象参数{name:[start,end] name是快捷键的名称,接受一个数组分别是时间的开始和结束

$('input[name=datetime]').daterangepicker({ 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: '确认',
   cancelLabel: '取消',
   fromLabel: '从',
   toLabel: '到',
   weekLabel: 'W',
   customRangeLabel: '选择时间',
   daysOfWeek:["日","一","二","三","四","五","六"],
   monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
  range: {
   "近期": ['2015-04-12',new Date()]
  }
 }, function (start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 });

效果如下:

bootstrap日期插件daterangepicker使用详解

这样就有了一个中文的日期插件了,当然还有其他的参数可以使用包括添加自己的class用来敷写bootstrap的样式来实现自己想要的样式,也可以使用单选时间框函数来实现,具体的大家可以仔细查看官方的文档来构建自己需要的时间选取控件。

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

Javascript 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
js实现右键菜单功能
Nov 28 Javascript
基于Vue实现timepicker
Apr 25 Javascript
纯JS实现简单的日历
Jun 26 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
微信小程序的生命周期的详解
Oct 19 #Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 #Javascript
js 两个日期比较相差多少天的实例
Oct 19 #Javascript
Angular弹出模态框的两种方式
Oct 19 #Javascript
vue使用axios跨域请求数据问题详解
Oct 18 #Javascript
JS实现按钮颜色切换效果
Sep 05 #Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
使用python Django做网页
2013/11/04 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python自动zip压缩目录的方法
2015/06/28 Python
python制作最美应用的爬虫
2015/10/28 Python
python事件驱动event实现详解
2018/11/21 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
运动会广播稿50字
2014/01/26 职场文书
集体婚礼策划方案
2014/02/22 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
员工安全生产承诺书
2014/05/22 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
党员检讨书
2014/10/13 职场文书
语文教师求职信范文
2015/03/20 职场文书
员工规章制度范本
2015/08/07 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers