You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

切换省份时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.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 07:39:01