How can I dynamically recreate / change Vanilla JS Datepicker element option(s)?-CodePudding

I am using a Vanilla JS Datepicker on a page that has a dropdown for multiple store locations, each of which have varying days of operation. Some being closed weekends, others being open weekends, some being closed Sunday, open Saturday, etc.

My objective is to create a single datepicker using an event listener on a selecte element with options for various locations.

In the event listener, I wish to call a function that will create the datepicker with the options for the days to be closed for that given location.

What I am experiencing is when the first location is selected, the datepicker populates according to that locations days of operation. Subsequent changes to the select though does not change the calender from original location. I am passing an array to the function that creates the datepicker.

I verified the array passed to the datepicker function changes with each option change, but it is not reflected on the calender.

let date1 = document.querySelector('input[name="Service_Date"]');
let closeDays = [];

function d1(days){
let serviceDate = new Datepicker(date1, {
autohide:true,
nextArrow:"<span class='fa fa-chevron-right'></span>",
prevArrow:"<span class='fa fa-chevron-left'></span>",
minDate:"today",
daysOfWeekDisabled:days
});    
}

closeDays = [0];
d1(closeDays);
closeDays = [];
closeDays = [0,6]
d1(closeDays);

The above code will generate an initial datepicker with Sundays (0) disabled after the 1st function call, but after the 2nd call, the disabled days should be Sunday and Saturday, but they are not.

I tried various attempts at calling the function, consoling out the array and the function parameter. They both change, but not the calendar.

CodePudding user response：

let date1 = document.querySelector('input[name="Service_Date"]');
let closeDays = [];
let serviceDate = '';

function d1(days){
if(serviceDate != ''){
serviceDate.destroy();
}
serviceDate = new Datepicker(date1, {
autohide:true,
nextArrow:"<span class='fa fa-chevron-right'></span>",
prevArrow:"<span class='fa fa-chevron-left'></span>",
minDate:"today",
daysOfWeekDisabled:days
});    
}

closeDays = [0];
d1(closeDays);
closeDays = [];
closeDays = [0,6]
d1(closeDays);

CodePudding user response：

To dynamically change the options of a Vanilla JS Datepicker, you need to first destroy the existing datepicker instance, and then create a new instance with the updated options. You can destroy the existing datepicker instance by calling its destroy method, and then create a new instance by calling the Datepicker constructor with the updated options.

Here's the updated code:

let date1 = document.querySelector('input[name="Service_Date"]');
let closeDays = [];
let serviceDate;

function d1(days) {
  if (serviceDate) {
    serviceDate.destroy();
  }

  serviceDate = new Datepicker(date1, {
    autohide: true,
    nextArrow: "<span class='fa fa-chevron-right'></span>",
    prevArrow: "<span class='fa fa-chevron-left'></span>",
    minDate: "today",
    daysOfWeekDisabled: days
  });    
}

closeDays = [0];
d1(closeDays);

closeDays = [0, 6];
d1(closeDays);

With this updated code, the calendar should change dynamically based on the selected location and the corresponding days array.