在工作中学习到的一种插件 上网查询之后发现

在bootstrap中的时间选择器有两种：dateTimePicker和dateRangePicker

HTML

<div id="reportrange" class="btn default" style="font-size:12px;">

     <i class="fa fa-calendar"></i>

     <span> </span>

     <b class="fa fa-angle-down"></b>

</div>

 

js

　　/**

     * [加载日期插件]

     */

    $('#reportrange').daterangepicker({

            opens: 'left',　　　　　　　　　//日期选择框弹出的位置　　　　　　　　

            startDate: moment().subtract('days', 29),//开始时间

            endDate: moment(),　　　　　　　　　　　//结束时间

            minDate: '01/01/2012',　　　　　　　　　 //最小时间

            maxDate: '12/31/2024',　　　　　　　　　//最大时间

            dateLimit: {

                days: 60　　　　　　　　　　　　　　　//起止时间的最大间隔

            },

            showDropdowns: true,

            showWeekNumbers: true,　　　　　　　//是否显示第几周

            timePicker: false,　　　　　　　　　　   //是否现在小时和分钟

            timePickerIncrement: 1,　　　　　　　 //时间的增量，单位为分钟

            timePicker12Hour: true,　　　　　　　　//是否使用12小时制来显示时间

            ranges: {

                '<?php echo lang('today');?>'    :   [moment(), moment()],　　　　　　　　//今天

                '<?php echo lang('yestoday');?>':   [moment().subtract('days', 1), moment().subtract('days', 1)], //昨天

                '<?php echo lang('last_seven_days');?>':  [moment().subtract('days', 6), moment()],　　　　　　 //最近7天

                '<?php echo lang('last_month');?>': [moment().subtract('days', 29), moment()],　　　　　　　　　//最近30天

            },

            buttonClasses: ['btn'],

            applyClass: 'green btn-sm',

            cancelClass: 'default btn-sm',

            format: 'YYYY/MM/DD',　　　　　　　　//控件中from和to 显示的日期格式

            separator: ' to ',

            locale: {

                applyLabel: '<?php echo lang('apply');?>',　　　　//确定

                cancelLabel: '<?php echo lang('cancel');?>',　　　//取消

                fromLabel: 'From',　　　　　　　　　　　　　　　　//起始时间

                toLabel: 'To',　　　　　　　　　　　　　　　　　　 //结束时间

                customRangeLabel: '<?php echo lang('customize');?>',  //自定义

                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],

                monthNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

                firstDay: 1

            }

        },

        function (start, end) {　　//格式化日期显示框

            $('#reportrange span').html(start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD'));

            stime = start.format('YYYY-MM-DD');

            etime = end.format('YYYY-MM-DD');

        }

    );

    $('#reportrange span').html(moment().subtract('days', 29).format('YYYY-MM-DD') + ' ~ ' + moment().format('YYYY-MM-DD')); //页面上第一现在的内容

 

　　/**

     * [选择自定义时间]  触发

     */

    $('#reportrange').on('apply.daterangepicker', function()

    {    

        stime = stime.replace(/-/g, '/');

        etime = etime.replace(/-/g, '/');

        stimestamp = new Date(stime).getTime() / 1000;

        etimestamp = new Date(etime).getTime() / 1000;

        DrawChart(stimestamp, etimestamp);//得到数据开始进行你下一步的操作

    });