zoukankan      html  css  js  c++  java
  • 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);
        });
    }
  • 相关阅读:
    UVA 10391 STL容器的使用
    UVA 10763
    UVA 10935
    UVA 洪水
    UVA 1594 set 里面放queue
    关于STL 容器的嵌套使用, 小试牛刀
    丑数 UVA 136
    UVA 1368 DNA
    antd 上传文件控件使用方法(坑)
    mysql查询一条工单时间需要10秒。优化sql语句得以解决。
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/9583635.html
Copyright © 2011-2022 走看看