bootstrap-daterangepicker插件运用

2018-09-05 07:50:27来源：博客园阅读 ()

引入：daterangepicker.css、daterangepicker.js、moment.js、moment.min.js

链接：https://files.cnblogs.com/files/kitty-blog/moment.min.js、https://files.cnblogs.com/files/kitty-blog/moment.js、https://files.cnblogs.com/files/kitty-blog/daterangepicker.js、https://files.cnblogs.com/files/kitty-blog/daterangepicker.css

/**初始化 Daterangepicker 插件 */
function initDaterangepicker() {
    $('.daterangepicker').daterangepicker({
        "showDropdowns": true,
        "showWeekNumbers": false,
        "showISOWeekNumbers": false,
        "timePicker": true,
        "timePicker24Hour": true,
        "timePickerSeconds": false,
        "autoApply": false,
        "locale": {
            "direction": "ltr",
            "format": "YYYY-MM-DD HH:mm",
            "separator": " 至 ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "From",
            "toLabel": "To",
            "daysOfWeek": [
                "周六",
                "周一",
                "周二",
                "周三",
                "周四",
                "周五",
                "周日"
            ],
            "monthNames": [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ],
            "firstDay": 1
        },
        "alwaysShowCalendars": false,
        "parentEl": "daterangepicker",
        "startDate": moment(),
        "endDate": moment(),
        "minDate": false,
        "maxDate": "05/28/2050",
        "applyClass": "btn-green btn-outline",
        "cancelClass": "btn-default btn-outline",
        "opens": "center",
        "drops": "down"
    }, function (start, end, label) {
        console.log("New date range selected: " + start.format('YYYY-MM-DD HH:mm') + " to " + end.format('YYYY-MM-DD HH:mm') + " (predefined range: " + label + ")");
        $("#startTime").val(start.format('YYYY-MM-DD HH:mm'));
        $("#endTime").val(end.format('YYYY-MM-DD HH:mm'));
    });
}
/**初始化 datetimepicker 日期 插件*/
function initDatepicker(defaultStartDate, defaultEndDate) {
    var now = new Date();
    //date + time
    var picker1 = $('.datetimepicker-startdate').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultStartDate,
        minDate: false,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-crosshairs',
            clear: 'fa fa-trash'
        }
    });
    var picker2 = $('.datetimepicker-enddate').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultEndDate,
        minDate: defaultStartDate,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-crosshairs',
            clear: 'fa fa-trash'
        }
    });
    //动态设置最小值  
    picker1.on('dp.change', function (e) {
        picker2.data('DateTimePicker').minDate(e.date);
    });
    //动态设置最大值  
    picker2.on('dp.change', function (e) {
        picker1.data('DateTimePicker').maxDate(e.date);
    });
}
/**初始化 datetimepicker 时间 插件*/
function initTimepicker(defaultStartTime, defaultEndTime) {
    var now = new Date();
    // only time
    var picker1 = $('.datetimepicker-starttime').datetimepicker({
        format: 'LT',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultStartTime == "" ? 5 : defaultStartTime,
        minDate: false,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
    });
    var picker2 = $('.datetimepicker-endtime').datetimepicker({
        format: 'LT',
        locale: moment.locale('zh-cn'),
        defaultDate: defaultEndTime == "" ? 21 : defaultEndTime,
        minDate: defaultStartTime,
        maxDate: false,
        ignoreReadonly: true,
        allowInputToggle: true,
    });
    //动态设置最小值  
    picker1.on('dp.change', function (e) {
        picker2.data('DateTimePicker').minDate(e.date);
    });
    //动态设置最大值  
    picker2.on('dp.change', function (e) {
        picker1.data('DateTimePicker').maxDate(e.date);
    });
}