When executing close() on flatpickr I get classList undefined error

Viewed 22

I'm using flatpickr within Tabulator in a custom editor in Vue. The following code adds some html elements and the creation of the flatpickr instance.

As flatpickr has no nativ clear button to unset date i tried to add this via a Clear-button which is calling the clear() and close() function of the flatpickr instance.

There is also a hint in the flatpickr documentation.

After clicking on close() I get following error:

enter image description here

Console:

enter image description here

Code implementation in Vue component:

dateTimeEditor(cell, onRendered, success) {
  // div Wrapper for flatpickr (datepicker)
  var flatpickrWrapper = document.createElement("div");
  flatpickrWrapper.setAttribute("id", "flatpickr");
  document.getElementById("app").appendChild(flatpickrWrapper);

  // Mandatory input field for date
  var dateInput = document.createElement("input");
  dateInput.placeholder = "Select date ...";

  // Clear date button to unset date
  var clearDateButton = document.createElement("button");
  clearDateButton.setAttribute("id", "clearDateButton");
  clearDateButton.innerHTML = "Clear";

  // Input and buttons has to be wrapped in parent div: https://flatpickr.js.org/examples/#custom-parsing-and-formating
  document.getElementById("flatpickr").appendChild(dateInput);
  //document.getElementById("flatpickr").appendChild(calendarButton);

  // Assign value of current cell to html input element
  dateInput.value = cell.getValue();

  // eslint-disable-next-line no-unused-vars
  var datepicker = flatpickr(dateInput, {
    dateFormat: "d-M-y",
    onChange: (selectedDates, dateStr, instance) => {
      console.log("Date changed: " + dateStr);
      success(dateStr);
      instance.destroy();
    },
  });

  onRendered(() => {
    flatpickrWrapper.focus();
    flatpickrWrapper.style.css = "100%";
  });

  if (dateInput.value.length !== 0) {
    document.getElementById("flatpickr").appendChild(clearDateButton);

    document.getElementById('clearDateButton').onclick = () => {
      console.log("Value: " + datepicker.isMobile);
      datepicker.clear();
      datepicker.close();
    };
  }

  return flatpickrWrapper;
},

Has anyone a clue why this error is occuring? Thanks

0 Answers
Related