javascript - Pickadate 开始呈现新的禁用时间

Question

我正在尝试进行 2 个输入 - 一个使用 pickadate ，另一个使用 pickatime 。当用户选择日期时，禁用时间数组将传递给 pickatime 函数。我有两个用 php 从后端传递的数组。我正在使用这些并使用需要禁用的时间/日期。我的代码:

        $('#myfield1').pickadate({
        format: 'yyyy-mm-dd',
        //array with dates
        disable: exclude_days_real,
        //I want to render new pickatime every time I choose a new date
        onSet: function() {
            //check if there are disabled hours in a date user have chosen
            var chosen_date = $('#myfield1').val();
            var disabled_time_real = [];
            //if there are disabled hours, make them correct array from js object
            if (time_array[chosen_date]) {
                var disabled_time = time_array[chosen_date];
                for (i = 0; i < disabled_time.length; i++) {
                    var time = disabled_time[i];
                    var time_synt = time.split(':');
                    disabled_time_real.push(time_synt);
                }
            }
            //make time input field blank
            $('#myfield2').val('');
            //and here I think it should render time select every time date is set, but it works only one time
            $('#myfield2').pickatime({
                format: 'H:i',
                interval: 60,
                min: [10, 00],
                max: [16, 00],
                disable: disabled_time_real
            });
        }
    });

如何让它在每次用户选择新日期时呈现？我考虑过删除输入并插入新输入，但我认为它应该有更好的解决方案。

Answer 1

使用选项调用 .pickatime 会使用这些初始选项将 pickatime 绑定(bind)到输入一次。根据我的经验，使用不同的选项再次调用它没有任何作用。相反，您需要使用 picker API ，获取选择器 API 的句柄。然后，您可以使用 API 方法来更改已在初始化程序中设置的选项。

我修改了你的代码来演示。我还没有测试过它，但我的应用程序中有类似的代码可以工作。

// save a reference to the pickatime object
var time_field = $('#myfield2').pickatime({
    format: 'H:i',
    interval: 60,
    min: [10, 00],
    max: [16, 00],
});

// get and save the 'picker' API object
var time_picker = time_field.pickatime('picker');

$('#myfield1').pickadate({
    format: 'yyyy-mm-dd',
    //array with dates
    disable: exclude_days_real,
    //I want to render new pickatime every time I choose a new date
    onSet: function() {
        //check if there are disabled hours in a date user have chosen
        var chosen_date = $('#myfield1').val();
        var disabled_time_real = [];
        //if there are disabled hours, make them correct array from js object
        if (time_array[chosen_date]) {
            var disabled_time = time_array[chosen_date];
            for (i = 0; i < disabled_time.length; i++) {
                var time = disabled_time[i];
                var time_synt = time.split(':');
                disabled_time_real.push(time_synt);
            }
        }
        //make time input field blank
        $('#myfield2').val('');

        // reset previously disabled times, if any, through the picker API
        time_picker.set('enable', true);

        // set the new disabled times through the picker API
        time_picker.set('disable', disabled_time_real);
    }
});

参见the documentation以获得完整的解释。这些文档非常好。