0

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

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

4

1 回答 1

1

使用选项调用 .pickatime 将使用这些初始选项将pickatime 绑定到输入一次。根据我的经验，用不同的选项再次调用它没有任何作用。相反，您需要使用选择器 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);
    }
});

有关完整说明，请参阅文档。文档非常好。

于 2016-08-19T00:32:24.330 回答