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:
Console:
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

