时间戳

首页 > 解决方案 > Flatpickr：在触发 onValueUpdate 时启用按功能禁用的日期

flatpickr - Flatpickr：在触发 onValueUpdate 时启用按功能禁用的日期

问题描述

我的目的是：

选择多个日期以选择最多 10 天的假期，不允许用户选择早于今天或周末的日期。

当我用多项选择和禁用周末初始化 flatpicker 时，一切看起来都不错，周末被禁用，比今天更早的日期也被禁用，我可以选择多个日期......

但是，当我点击一个日期时，禁用的周末会启用。

请检查此 jsfiddle 以查看我尝试过的内容

https://jsfiddle.net/seba1rx/vj695bL3/

这是一个错误还是我在这里遗漏了什么？？？

var nr_holidayDays = 10;

$("#dateField").flatpickr({
    mode: "multiple",
    minDate: "today",
    dateFormat: "d-m-Y",
    locale: {
        "firstDayOfWeek": 1 // start week on Monday
    },
    disable: [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);
        }
    ],
    onValueUpdate: function(selectedDates, dateStr, instance){

        var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
            var str = flatpickr.parseDate(ele, "d-m-Y");
            acc = (acc == "") ? str : acc + ";" + str;
            return acc;
        }, "");

        instance.set("enable", [function(date) {
            if (selectedDates.length > nr_holidayDays) {
                var currDateStr = flatpickr.parseDate(date, "Y-m-d");
                var x = selectedDatesStr.indexOf(currDateStr);
                return x != -1;
            } else {
                return true;
            }
        }]);
    }
});

我想要的是：

- 能够选择多个日期。

- 无法选择早于今天的日期。

- 无法选择周末（周六和周日）。

- 能够选择最大天数（在这种情况下为 10 天）。

- 如果选择了最大天数，则其余天数将被禁用。

- 为了在选择最大天数时选择另一个日期，请取消选择一天和启用从星期一到星期五的天数，应禁用周末，应禁用早于今天的日期。

标签： flatpickr

解决方案

我尝试了其他事件（onChange）并控制了数组中的日期，所以这是一个可以完成我想要的所有工作的脚本

这是一个jsfiddle：

https://jsfiddle.net/seba1rx/mz30j9xw/7/）

var nr_holidayDays = 4;
$('#dateField').flatpickr({
    mode: 'multiple',
    allowInput: true,
    minDate: 'today',
    dateFormat: 'd-m-Y',
    locale: {
        'firstDayOfWeek': 1 // start week on Monday
    },
    disable: [ 
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);
        }
    ],
    onChange: function(selectedDates, dateStr, instance){

        var selectedDate = instance.selectedDateElem.dateObj;
        var int_month = selectedDate.getMonth()+1;
        var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();

        var int_day = selectedDate.getDate();
        var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();

        var thisDate = selectedDate.getFullYear()  + '-' + str_month + '-' + str_day;
        //console.log('slected date: '+thisDate);

        var_arr_dates = [];

        selectedDates.forEach(function(iteratedDate){
            var int_day = iteratedDate.getDate();
            var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();

            var int_month = iteratedDate.getMonth()+1;
            var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();

            var thisDate =  str_day + '-' + str_month + '-' + iteratedDate.getFullYear();
            var_arr_dates.push(String(thisDate));
        });

        var selectedDatesStr = var_arr_dates.reduce(function(accumulator, element) {
            accumulator = (accumulator == '') ? element : accumulator + ';' + element;
            return accumulator;
        }, '');

        instance.set('enable', [
            function(date) {
                if (selectedDates.length >= nr_holidayDays ) {
                    var int_month = date.getMonth()+1;
                    var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();

                    var int_day = date.getDate();
                    var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();

                    var evaluatedDate = str_day + '-' + str_month + '-' + date.getFullYear();

                    var x = selectedDatesStr.indexOf(evaluatedDate);
                    console.log('indexof: '+evaluatedDate+' is '+x);
                    return x != -1;

                } else {
                    return !(date.getDay() === 0 || date.getDay() === 6);
                }
            }
        ]);
    }
});

推荐阅读