Object property doesn't update when user changes mind-CodePudding

The idea is that once a specific province is chosen from a selector, the calendar subsequently only shows the available dates in the flatpickr calendar. That works.

However, when the user changes their mind and chooses another province, the available dates for that province don't get updated. Console.log (data) shows the dates being updated, it's just not reflected in the calendar.

So I guess the specific question is; how to reset the enable property.

Source

$(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>

This is the data for province #1:

["2021-09-27","2021-09-28","2021-09-29","2021-09-30"]

for province #2:

["2021-10-06","2021-10-08","2021-10-15","2021-10-28"]

CodePudding user response：

.flatpickr(config) is only used for the initial configuration of the datepicker. If you want to change an existing datepicker, you need to use the "set" method:

$("input[type=datepick]").flatpickr("set", "enable", data);

CodePudding user response：

Thanks to Barmar for the help. Below is the changed code. I also added a clear() to reset the values.

$(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();
      }

    });