daterangepicker 时间插件

Posted 2020-09-03 ddxg

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

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