首页 > 代码库 > daterangepicker 时间插件

daterangepicker 时间插件

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

在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);//得到数据开始进行你下一步的操作
    });

 

 


                                      

daterangepicker 时间插件