我正在尝试进行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
            });
        }
    });


每当用户选择新日期时,如何使它呈现?我考虑过删除输入并插入新输入,但是我认为它应该有更好的解决方案。

最佳答案

使用options调用.pickatime会使用这些初始选项将pickatime绑定到输入一次。根据我的经验,使用不同的选项再次调用它无济于事。相反,您需要使用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。该文档是优秀的。

09-20 14:07