bootstrap之双日历时间段选择控件Date Range Picker
2016-06-19 23:39
711 查看
Date Range Picker: http://www.daterangepicker.com/
参考:bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
下面实现同一页面中 多个 爽日历时间段选择控件 的初始化:
部分 html 代码如下:
其中关键代码为:
定义控件结构样式。
使用 js 对该控件进行初始化:
需要注意的是:多个日历时间段选择控件初始化中的回调方法(当选择时间段后被触发的函数),为对修改了日期的控件进行修改,而不是全部控件进行修改,需要使用到 this.element 获取当前被修改的空间的 .daterange jQ对象,并进行相应的日期修改。
参考:bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
下面实现同一页面中 多个 爽日历时间段选择控件 的初始化:
部分 html 代码如下:
<span style="font-size:18px;"><h5 class="tit-header">新增关注人数统计</h5> <div class="form-control pull-right daterange"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> <div id="increase-chart" class="ibox" style="width: 100%;height:220px;"></div> <h5 class="tit-header">取消关注人数统计</h5> <div class="ibox"> <div class="form-control pull-right daterange"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> </div> <div id="increase-chart" class="ibox" style="width: 100%;height:220px;"></div> <h5 class="tit-header">净增关注人数统计</h5> <div class="ibox"> <div class="form-control pull-right daterange"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> </div> <div id="increase-chart" class="ibox" style="width: 100%;height:220px;"></div> <h5 class="tit-header">累积关注人数</h5> <div class="ibox"> <div class="form-control pull-right daterange"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> </div> <div id="increase-chart" class="ibox" style="width: 100%;height:220px;"></div></span>
其中关键代码为:
<span style="font-size:18px;"><div class="form-control pull-right daterange"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div></span>
定义控件结构样式。
使用 js 对该控件进行初始化:
$(function() { initDateRangePicker(); }); // 初始化 日期范围选择器 function initDateRangePicker() { $('.daterange span').html(moment().subtract(7, 'days').format('YYYY-MM-DD') + ' 至 ' + moment().subtract(1, 'days').format('YYYY-MM-DD')); $('.daterange').daterangepicker({ startDate: moment().subtract(7, 'days'), endDate: moment().subtract(1, 'days'), maxDate: moment().subtract(1, 'days'), ranges: { '最近7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')], '最近15天': [moment().subtract(15, 'days'), moment().subtract(1, 'days')], '最近30天': [moment().subtract(30, 'days'), moment().subtract(1, 'days')] }, locale: { applyLabel : '确定', cancelLabel : '取消', fromLabel : '起始时间', toLabel : '结束时间', customRangeLabel : '自定义', daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay : 1 } }, function(start, end, label) {//格式化日期显示框 console.log(label); var iconCalendar = '<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>'; var iconCaret = '<b class="caret"></b>'; this.element.html(iconCalendar + ' <span>' + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') + '</span> ' + iconCaret); }); }
需要注意的是:多个日历时间段选择控件初始化中的回调方法(当选择时间段后被触发的函数),为对修改了日期的控件进行修改,而不是全部控件进行修改,需要使用到 this.element 获取当前被修改的空间的 .daterange jQ对象,并进行相应的日期修改。
相关文章推荐
- Bootstrap简易使用指南
- 谈谈css3的text-stroke对bootstrap的icon的影响
- Bootstrap学习(二)
- 利用vue.js把静态json绑定bootstrap的table
- 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战 关于 拦截器的 学习 部分
- 基于bootstrap和knockoutjs使用 mvc 查询
- 火狐 bootstrap pre 不换行
- bootstrap 模板
- 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战
- 基于bootstrap风格的项目
- jQuery UI Bootstrap是什么?
- JS模拟bootstrap下拉菜单效果实例
- 下一代Bootstrap的5个特点 超酷炫!
- 基于Bootstrap的UI扩展 StyleBootstrap
- Bootstrap前端开发案例一
- FATAL ha.BootstrapStandby: Unable to fetch namespace information from active NN at ***
- Bootstrap fileInput多文件同步异步上传(C#)
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- bootstrap精简教程
- Echarts 图表放到bootstrap的tab-panel中不加载 处理