bootstrap之双日历时间段选择控件Date Range Picker

原创 2016年06月19日 23:39:48

Date Range Picker: http://www.daterangepicker.com/

参考: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 dateRangePicker时间范围控件

 BootStrap dateRangePicker时间范围控件 1      安装引用 1.1    下载zip Github:https://github.com/da...
  • u010648190
  • u010648190
  • 2014年07月16日 15:19
  • 47533

JS DateRangePicker 默认值为空

DateRangePicker是一款时间范围选择器,界面良好,非常适合短时间范围选择的插件,具体源码可以在http://www.daterangepicker.com/找到 ,但是目前使用中,感觉功能...
  • qq_33518042
  • qq_33518042
  • 2017年08月15日 08:45
  • 3391

Daterangepicker 参数详解

Daterangepicker 参数详解
  • Webben
  • Webben
  • 2017年10月23日 15:26
  • 478

daterangepicker控件的使用

$(document).ready(function() {                var cb = function(start, end, label) {           //con...
  • zxf1242652895
  • zxf1242652895
  • 2017年02月14日 13:17
  • 4548

bootstrap日期插件daterangepicker的使用

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

daterangepicker的使用以及后台处理

现在网上关于时间范围选择控件daterangepicker的用例较少,接下来我将为大家分享一下我在使用过程中遇到的问题以及如何解决的。 1.danterangepicker的汉化问题 local这个参...
  • digger_419
  • digger_419
  • 2017年03月17日 11:36
  • 772

使用jquery.daterange.js双日历控件时,daterangepicker初始化默认日期

1.首先原代码 var DateRangePicker = function (element, options, cb) {
  • sjhnanwang
  • sjhnanwang
  • 2014年07月10日 16:27
  • 40041

Bootstrap-daterangepicker(时间范围选择器使用及汉化)

你需要引用如下Js文件且顺序不得有误,否则会报诸如$().moment()is not a function的错误,这就是JS文件加载顺序导致的,请不要作死。 /*bootstrap*/ 使用方法...
  • qq_16371909
  • qq_16371909
  • 2017年01月12日 20:33
  • 2691

bootstrap之双日历时间段选择控件—daterangepicker(汉化版)

双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在...
  • zdx1515888659
  • zdx1515888659
  • 2014年12月02日 11:33
  • 62821

daterangepicker 控件设置日期格式

$('#scheduledEndTime').daterangepicker({//时间控件选择          singleDatePicker: true,                   ...
  • zxf1242652895
  • zxf1242652895
  • 2017年01月03日 12:15
  • 5056
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap之双日历时间段选择控件Date Range Picker
举报原因:
原因补充:

(最多只允许输入30个字)