Datepicker

Normal Date picker🔗

How to ?

Options

const dateOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
};

Code

<input name="normalDatepicker" use:datePicker={dateOptions} readonly/>

Date picker with initial date🔗

How to ?

adding `defaultDate` to options

Options

const defaultDateOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
	defaultDate: '2023-12-30',
};

Code

<input name="datepickerDefaultDate" use:datePicker={defaultDateOptions} readonly/>

Date picker with min/max date🔗

How to ?

adding `minDate` and/or `maxDate` to options and passing date string or date object as a value

`maxDate` will extended a maximum year you can select in year dropdown if it greater than current year.

Options

const minMaxDateOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
	minDate: '2019-03',
	maxDate: '2033-12'
};

Code

<input name="datepickerMinMaxDate" use:datePicker={minMaxDateOptions} readonly />

Date picker with disable date🔗

How to ?

adding `disable` to options and passing date string or date object as a value

Options

const disabledOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
	disable: ['2023-08-30', '2023-07-21', '2023-06-08', new Date(2023, 11, 30)]
};

Code

<input name="datepickerDisableDate" use:datePicker={disabledOptions} readonly />

Date picker with hook options 🔗

How to ?

in this example is using only `onChange`, `onOpen` and `onClose` but you can adding any flatpickr hook to the options. (you can open console to see the hook is working)

Options

const hookDateOptions = {
	...dateOptions,
	onChange: (selectedDates, dateStr) => {
		console.log('on change hook!');
		console.log(selectedDates[0]);
		console.log(dateStr);
	},
	onOpen: (selectedDates, dateStr) => {
		console.log('on open hook!');
	},
	onClose: (selectedDates, dateStr) => {
		console.log('on close hook!');
	}
};

Code

<input name="datepickerHookDate" use:datePicker={hookDateOptions} readonly />

Date picker with `on` directive🔗

How to ?

also like a datepicker with hook you can using svelte's `on` directive with a name of hook too.

you can access to a data of hook by using `event.detail` (you can open console to see the event is working)

Options

const dateOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y'
};

Script

const changeHandler = (event) => {
	if (event.detail) {
		const { selectedDates, dateStr, instance } = event.detail;
		console.log('event change!', { selectedDates, dateStr, instance });
	}
};
const openHandler = (event) => {
	console.log('event open!');
};
const closeHandler = (event) => {
	console.log('event close!');
};

Code

<input name="datepickerOnDirectiveDate" 
	use:datePicker={dateOptions} 
	on:change={changeHandler} 
	on:open={openHandler} 
	on:close={closeHandler} 
	readonly 
/>

Date picker with flatpickr element binding🔗

How to ?

You can binding a element and using `._flatpickr` to access to flatpickr instance

Options

const defaultDateOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
};

Script

let datepickerElement;
const handdleDatepickerBindClick = () => {
	datepickerElement._flatpickr.clear();
};

Code

<input name="normalDatepickerBind" use:datePicker={dateOptions} bind:this={datepickerElement} readonly/>
<button type="button" on:click={handdleDatepickerBindClick}>Clear</button>

Date picker with wrapper🔗

How to ?

You can using a datepicker action on wrapper element such as `div` by passing `wrap: true` as a additional option and adding `data-input` as a attribute to input element.

Options

const wrapOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
	wrap:true
};

Code

<div use:datePicker={wrapOptions}>
	<input name="wrapperDatepicker" data-input />
	<button type="button" title="toggle" data-toggle> toggle </button>
	<button type="button" title="clear" data-clear> clear </button>
</div>

Localize and Local year🔗

How to ?

In this example will using Thai language by adding `locale: Thai` to options while `Thai` is imported from `flatpickr_plus/dist/l10n/th.js` and using Buddhist era by adding`useLocaleYear: true` to options

Options

const dateOptions = {
	dateFormat: 'Z',
	altFormat: 'd F Y',
	altInput: true,
	ariaDateFormat: 'd F Y',
	locale: Thai,
	useLocaleYear: true
};

Script

import { Thai } from 'flatpickr_plus/dist/l10n/th.js';

Code

<input name="localizeDatepicker" use:datePicker={localizeOptions} readonly />

Time picker with initial hours🔗

How to ?

Adding 'noCalendar' and 'enableTime' to display only time picker.

Options

const dateOptions = {
	defaultDate: '12:30',
	enableTime: true,
	noCalendar: true,
	dateFormat: 'H:i',
};

Code

<input name="timedatepicker" use:datePicker={timeOptions} readonly />

Using in from

you can checking this usage at this REPL