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与这些初始选项绑定到输入一次。根据我的经验，用不同的选项再次调用它并没有任何作用。相反，您需要使用picker API来获取picker 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。文档非常好。

Pickadate开始呈现新的禁用时间

1 个答案: