bootstrap日期插件daterangepicker的使用

今天用的了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请求
以上就可以构建一个英文版的日期控件了

接下来着重介绍一下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'));});

效果如下：

当然你可能也许想实现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'));});

效果如下：

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

bootstrap日期插件daterangepicker的使用相关推荐

bootstrap日期插件的使用示例
本文介绍下bootstrap日期插件的使用.注意:从官网下载的demo可能由于浏览器问题不兼容,可以通过多个浏览器尝试. 1.在jsp文件中需要引入bootstrap-datetimepicker.m ...
Bootstrap日期插件之Datetimepicker修改默认语言（附带源码）
在做这个插件的时候,一开始导入语言包报如下错误 bootstrap-datepicker.zh-CN.js:6 Uncaught TypeError: Cannot read property 'da ...
php日期选择插件,优雅的日期选择插件daterangepicker
插件描述:jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择使用方法第一步:引入css文件: bootstrap.min.css.font-awesome ...
基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
顶级的 Bootstrap 日期选择器和时间选择器插件（附免费下载链接）
顶级的 Bootstrap 日期选择器和时间选择器插件 Bootstrap的Datepicker元素是一种用户友好和直观的方式,可以轻松选择日期.它可用于移动端和PC端,还可以选择以 "从右 ...
jsp之bootstrap-datetimepicker日期插件
bootstrap-datetimepicker日期插件一.引入文件这里是我目录下的 ,因为是bootstrap前端框架的插件,所以jQuery.bootstrap和插件都需要引入对应文件 < ...
php获取laydate,解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
50个Bootstrap扩展插件
Bootstap这个框架本身已经包含了开发网页的众多要素,包括了常用的工具以及扩展组件,如果你在开发页面时觉得在某些方面还不够的话,不妨看看最新收集的50个Bootstrap扩展插件,这些插件在我们平 ...
bootStrap日期选择器
kkbootstrap datetimepicker 日期插件超详细使用方法_杨先森的博客-CSDN博客可参考上面的csdn或农信银行的jsp/workflow/detail.jsp ...
datepick二格式化时间_bootstrap datetimepicker日期插件超详细使用方法介绍
本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下首先在文件头部引入必要的文件: 想用中文显示,加入bootstrap-datetime ...

bootstrap日期插件daterangepicker的使用

bootstrap日期插件daterangepicker的使用相关推荐

最新文章

热门文章