当用户改变主意时,对象 属性 不会更新
Object property doesn't update when user changes mind
这个想法是,一旦从选择器中选择了一个特定的省份,日历随后只会显示 flatpickr 日历中的可用日期。行得通。
但是,当用户改变主意并选择另一个省份时,该省份的可用日期不会更新。 Console.log(数据)显示正在更新的日期,只是没有反映在日历中。
所以我想具体问题是;如何重置启用 属性.
来源
$(document).ready(function(){
$('select[name="provincie"]').on('change',function(){
var provincie_id = $(this).val();
if (provincie_id){
$.ajax({
url: 'provincie/datum/'+provincie_id,
type: 'GET',
dataType: 'json',
success: function (data){
var config = {
inline: false,
altInput: true,
dateFormat: "Y-m-d",
enable: data,
}
console.log(data); //shows dates are being updated
$("input[type=datepick]").flatpickr(config);
}
});
} else {
$('select[name="times"]').empty();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
这是第 1 省的数据:
["2021-09-27","2021-09-28","2021-09-29","2021-09-30"]
第 2 省:
["2021-10-06","2021-10-08","2021-10-15","2021-10-28"]
.flatpickr(config)
仅用于日期选择器的初始配置。如果要更改现有的日期选择器,则需要使用 "set"
方法:
$("input[type=datepick]").flatpickr("set", "enable", data);
感谢 Barmar 的帮助。下面是更改后的代码。我还添加了一个 clear() 来重置值。
$(document).ready(function(){
let calendar = flatpickr("input[type=datepick]",{altInput:true, dateFormat:"Y-m-d", enable:["2021-09-30"]});
$('select[name="provincie"]').on('change',function(){
calendar.clear();
var provincie_id = $(this).val();
if (provincie_id){
$.ajax({
url: 'thuisprik-afspraak/datum/'+provincie_id,
type: 'GET',
dataType: 'json',
success: function (data){
calendar.set("enable", data);
}
});
} else {
$('select[name="stad"]').empty();
}
});
这个想法是,一旦从选择器中选择了一个特定的省份,日历随后只会显示 flatpickr 日历中的可用日期。行得通。
但是,当用户改变主意并选择另一个省份时,该省份的可用日期不会更新。 Console.log(数据)显示正在更新的日期,只是没有反映在日历中。
所以我想具体问题是;如何重置启用 属性.
来源
$(document).ready(function(){
$('select[name="provincie"]').on('change',function(){
var provincie_id = $(this).val();
if (provincie_id){
$.ajax({
url: 'provincie/datum/'+provincie_id,
type: 'GET',
dataType: 'json',
success: function (data){
var config = {
inline: false,
altInput: true,
dateFormat: "Y-m-d",
enable: data,
}
console.log(data); //shows dates are being updated
$("input[type=datepick]").flatpickr(config);
}
});
} else {
$('select[name="times"]').empty();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
这是第 1 省的数据:
["2021-09-27","2021-09-28","2021-09-29","2021-09-30"]
第 2 省:
["2021-10-06","2021-10-08","2021-10-15","2021-10-28"]
.flatpickr(config)
仅用于日期选择器的初始配置。如果要更改现有的日期选择器,则需要使用 "set"
方法:
$("input[type=datepick]").flatpickr("set", "enable", data);
感谢 Barmar 的帮助。下面是更改后的代码。我还添加了一个 clear() 来重置值。
$(document).ready(function(){
let calendar = flatpickr("input[type=datepick]",{altInput:true, dateFormat:"Y-m-d", enable:["2021-09-30"]});
$('select[name="provincie"]').on('change',function(){
calendar.clear();
var provincie_id = $(this).val();
if (provincie_id){
$.ajax({
url: 'thuisprik-afspraak/datum/'+provincie_id,
type: 'GET',
dataType: 'json',
success: function (data){
calendar.set("enable", data);
}
});
} else {
$('select[name="stad"]').empty();
}
});