daterangepicker 时间插件

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

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

HTML

　　/**
   * [加载日期插件]
   */
   $(\'#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);//得到数据开始进行你下一步的操作
    });