切换省份时Flatpickr日历enable属性不更新,如何重置该属性?
问题原因
多次调用.flatpickr(config)初始化同一输入框时,flatpickr不会覆盖已有实例的配置,因此新的enable日期规则不会生效,只有第一次初始化的配置会保留。
解决方案
两种实现方式可选:
方式1:每次更新前销毁旧实例(兼容性好)
修改ajax success内的逻辑,初始化前先调用flatpickr的destroy方法销毁已存在的实例,再重新初始化:
$(document).ready(function(){ // 存储flatpickr实例 let datePicker = null; $('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){ // 先销毁已有实例 if(datePicker) datePicker.destroy(); var config = { inline: false, altInput: true, dateFormat: "Y-m-d", enable: data, } console.log(data); // 初始化新实例并存储 datePicker = $("input[type=datepick]").flatpickr(config); } }); } else { $('select[name="times"]').empty(); } }); });
方式2:直接修改现有实例配置(性能更好)
不需要销毁重建,直接更新实例的enable属性后调用redraw()方法重绘日历:
$(document).ready(function(){ // 页面加载时先初始化基础配置 const datePicker = $("input[type=datepick]").flatpickr({ inline: false, altInput: true, dateFormat: "Y-m-d", enable: [] }); $('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){ // 直接更新enable配置 datePicker.set('enable', data); // 重绘日历生效 datePicker.redraw(); console.log(data); } }); } else { $('select[name="times"]').empty(); } }); });
内容的提问来源于stack exchange,提问作者Adam D.
相关产品推荐
相关产品推荐

