How to use the flatpickr function in flatpickr

this.onTriggerEvent(new CustomEvent('keyup'));
                }
                else {
                    this.onTriggerEvent(undefined);
                }
            }
        };
        // add the time picker when format is UTC (Z) or has the 'h' (meaning hours)
        if (outputFormat && (outputFormat === 'Z' || outputFormat.toLowerCase().includes('h'))) {
            pickerOptions.enableTime = true;
        }
        /** @type {?} */
        const placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
        /** @type {?} */
        const $filterInputElm = $(`<div class="flatpickr"><input placeholder="${placeholder}" data-input="" class="form-control" type="text"></div>`);
        this.flatInstance = ($filterInputElm[0] &amp;&amp; typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(pickerOptions) : Flatpickr($filterInputElm, pickerOptions);
        return $filterInputElm;
    }
    /**

const oldComputations = fpInstance.trackerComputations.splice(0, 42);
            oldComputations.forEach(comp => comp.stop());

            // Set RV to new month (which will trigger autorun to method call for new event counts).
            const date = Moment().month(fpInstance.currentMonth)
                .year(fpInstance.currentYear)
                .startOf('month')
                .valueOf();
            template.dayPickerCurrentMonth.set(date);
          },
        };

        // Only instantiate once.
        if (!template.dayPicker) {
          flatpickrConfig.defaultDate = new Date(defaultDate);
          template.dayPicker = flatpickr('#dayPicker', flatpickrConfig);
        }
        if (!template.startTimeFlatpickr) {
          flatpickrConfig.defaultDate = new Date(defaultDate);
          template.startTimeFlatpickr = flatpickr('#startTime', flatpickrConfig);
        }
        if (!template.endTimeFlatpickr) {
          flatpickrConfig.defaultDate = null;
          template.endTimeFlatpickr = flatpickr('#endTime', flatpickrConfig);
        }
      }
    });
  }

mounted() {
      // Return early if flatPickr is already loaded
      /* istanbul ignore if */
      if (this.fp) return;

      // Backup original handler
      this.oldOnChange = this.config.onChange;
      // Hook our handler
      this.config.onChange = this.onChange;

      // Init flatpickr
      this.fp = new Flatpickr(this.getElem(), this.config);
      // Set initial date
      this.fp.setDate(this.value, true);

    },
    methods: {

componentDidMount() {
    // start new Flatpickr instance
    this.flatpickrInstance = flatpickr(this.flatpickrRef.current, this.getFlatpickrOptions());
  }

};

    // add the time picker when format is UTC (Z) or has the 'h' (meaning hours)
    if (outputFormat && (outputFormat === 'Z' || outputFormat.toLowerCase().includes('h'))) {
      pickerOptions.enableTime = true;
    }

    // merge options with optional user's custom options
    this._flatpickrOptions = { ...pickerOptions, ...userFilterOptions };

    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
    if (this.columnFilter && this.columnFilter.placeholder) {
      placeholder = this.columnFilter.placeholder;
    }
    const $filterInputElm: any = $(`<div class="flatpickr search-filter filter-${columnId}"><input placeholder="${placeholder}" data-input="" class="form-control" type="text"></div>`);
    this.flatInstance = ($filterInputElm[0] &amp;&amp; typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(this._flatpickrOptions) : Flatpickr($filterInputElm, this._flatpickrOptions as unknown as Partial);
    return $filterInputElm;
  }

mounted () {
			var this_this = this;

			var element = this.$el.getElementsByTagName('input')[0];
			this.datepicker = new Flatpickr(
				element, {
                    allowInput: true,
					altFormat: 'Y-m-d',
					dateFormat: 'Y-m-d',
                    weekNumbers: true,
					onChange: function(selectedDates, dateStr, instance) {
						this_this.$emit('onChange', dateStr)
					},
				});
		},
        methods: {

function init() {
        const options = {};
        if (I18n.locale === "nl") {
            options.locale = Dutch;
        }
        flatpickr(selector, options);
    }

init() {
        this.picker = flatpickr(this.input, this.options);
        !!this.formattedEl.value && this.picker.setDate(this.formattedEl.value, false, 'Y-m-dTH:i');
        this.toggleClearBtn();

        [...this.el.getElementsByClassName('js-clear-input')].forEach(el => el.addEventListener('click', this.clear.bind(this)));
    }

const dateField = tools.getNodes('input[type="date"]', false, field, true)[0];
		const defaultDate = dateField.value;
		const minDate = dateField.getAttribute('min');
		const maxDate = dateField.getAttribute('max');

		const fpOptions = {
			allowInput: false,
			altInput: true,
			altFormat: 'F j, Y',
			defaultDate,
			minDate,
			maxDate,
			static: true,
		};

		flatpickr(dateField, fpOptions);
	});
};

element.addEventListener('click', (e) => {
    e.preventDefault();
    span.classList.remove('hidden');
    axios.delete(url, {
      headers: {
        "X-Requested-With": "XMLHttpRequest",
      },
    }).then((response) => {
      setTimeout(() => {
        window.location.href = response.data.redirect_url;
      }, 1000);
    });
  });
}

flatpickr(".timepicker", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  time_24hr: true
});

flatpickr(".datepicker", {
  minDate: "today"
});