Flatpickr

There are few options on how to Flatpickr into your project.

Install from yarn

Install the Flatpickr Js library from command prompt from the root directory of the project:

yarn add flatpickr --save

Import the Flatpickr package. We have imported in the admin/src/routes/+layout.svelte file as its commonly used in multiple pages.

import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';

Below the example how to use the package and make it working ApexTree on any page.

HTML

let flatpickrExamples: NodeListOf <HTMLElement>; 
onMount(() => {
    function initFlatpickr() {
		flatpickrExamples = document.querySelectorAll('[data-provider]') as NodeListOf<HTMLElement>; // Type assertion to HTMLElement
		flatpickrExamples.forEach((item) => {
			const provider = item.getAttribute('data-provider');

			if (provider === 'flatpickr') configureFlatpickr(item);
			else return; // Early return if provider is not supported
		});
    }
});

<input data-provider="flatpickr" data-date-format="d M, Y" type="text" placeholder="YYYY-MM-DD" class="form-input" />

Make sure to add data-provider="flatpickr" to get the working flatpickr. You can use other attributes like data-min-date, data-date-format, data-multiple-date etc.