我正在尝试进行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。该文档是优秀的。