Date Picker Realtime reactive filter dates

[manalkaff]

Im using svelte and firebase. fetching realtime data into variable. i want to use DatePicker and streaming disabled dates from database.

when the DatePicker window is open, the filter function doesnt updates when the variable does.

how do i make the DatePicker, filter dates realtime even when the DatePicker window is open.

i event try this and still doesnt work

export let disabled_dates = []
  let date_open = false;
  let myDatepicker = null

  $: filterFunction = (date) => {

    for (let disabled_index in disabled_dates){
      let disabled = disabled_dates[disabled_index].split("/")
      if(disabled[0] == date.getDate() && disabled[1]-1 == date.getMonth() && disabled[2] == date.getFullYear()){
        return false
      }
    }
    return true
  }

  $: refresh_dates(disabled_dates)

  function refresh_dates(disabled_dates){
    console.log("refresh_dates: ", disabled_dates)
    if(myDatepicker != null){
        if(date_open){
          myDatepicker.close()
          myDatepicker.open()
        }
    }
  }

  function load_input(){
    document.getElementById("myDatepicker").addEventListener("open.te.datepicker", event => {
      date_open = true
    })
    const myInput = new Input(document.getElementById("myDatepicker"));
    const options = {
      format: "dd/mm/yyyy",
      // confirmDateOnSelect: true,
      removeClearBtn: true,
      // removeOkBtn: true,
      // removeCancelBtn: true,
      disablePast: true,
      filter: filterFunction}
    myDatepicker = new Datepicker(
      document.getElementById("myDatepicker"),
      options
    );

[juujisai]

Hi! Have you tried using the Datepicker's update method? I think it could be useful in your case

https://tailwind-elements.com/docs/standard/forms/datepicker/#docsTabsAPI

[manalkaff]

@juujisai i did tried it before, and still doesnt work. i want a live update even when the calender is open

datePicker.update({
 filter: filterFunction 
})

[juujisai]

@manalkaff The only thing I can think right now is to call close and open method together with update.

    datepickerInstance.close();
    datepickerInstance.update({ filter: filterFunction });
    datepickerInstance.open();

It will make the backdrop flash a little, but it will update the component

[manalkaff]

@juujisai same result, when the date change from the database. it did disable live and realtime. its just got bugged where when the date or ok button clicked its only gray highlight the button not selecting it.

[juujisai]

@manalkaff I see. Seems that the datepicker doesn't have time to close properly before opening and blocks the picker. You can try delaying the update and open methods but then the close/open animation is more visible

datepickerInstance.close();
setTimeout(() => {
  datepickerInstance.update({ filter: filterFunction });
  datepickerInstance.open();
}, 150);

[manalkaff]

@juujisai yeah even tho there is a visible close and open animation, at least it works now. thank you so much. im still hoping there will be an update to fix this tho. like sending events to the date picker without refreshing it.

at last. thank you so much @juujisai

[firstninja111]

@manalkaff Thanks for posting this kind of solutions. One question please.

Why .close() and .open() function doesn't work in my side? Thanks.

[manalkaff]

@jamesito0923 I can't be sure without any details but its probably the variable datepickerInstance isnt intialized before you calling .close() and .open()

[juujisai]

@jamesito0923 Does it throw any errors?