• bootstrap-daterangepicker插件运用


    引入: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);
        });
    }
  • 相关阅读:
    IDEA 使用 Gradle 创建 Java 项目
    Java HttpsUnits 工具类实现 Https
    Android Thread 常用方法
    Android Handler、Message 常用方法
    Android 透明导航键遮挡布局
    Android 通过 JDBC 连接远程数据库
    python 连接数据库
    备份及更新 Portainer
    secureCRT免密码登陆Linux
    Linux vi 编辑器常见命令的使用
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/9583635.html
Copyright © 2020-2023  润新知