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

               

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 = '';            var iconCaret = '';            this.element.html(iconCalendar + '  ' + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') + ' ' + iconCaret);        });    }

       需要注意的是：多个日历时间段选择控件初始化中的回调方法（当选择时间段后被触发的函数），为对修改了日期的控件进行修改，而不是全部控件进行修改，需要使用到 this.element 获取当前被修改的空间的 .daterange jQ对象，并进行相应的日期修改。

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow