Advance usage of Multiple date picker

Change date format

change the date format as you like

Support Format

You can check supported date format characters here

.svelte
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const options = {
		mode: 'multiple',
		dateFormat: 'Z' /*set as ISO Date format**/ 
	};
</script>

<input name="dateFormat" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9

Result:

Value:

Please select date from above input.

Alt input

change the date format as you like , unaffected a real value

Support Format

You can check supported date format characters here

.svelte
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const options = {
		mode: 'multiple',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true, 
		altFormat: 'd F Y' 
	};
</script>

<input name="altInput" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11

Result:

Value:

Please select date from above input.

Set default date(s)

Set a default date(s) to input after component is mounted

.svelte
+
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const todayDate = new Date(); 
	const options = {
		mode: 'multiple',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: 'd F Y',
		defaultDate: [
			new Date() /**Set default date date to today*/, 
			new Date().setDate(new Date().getDate() + 2) /**Set default date date to next 2 date*/, 
			new Date().setDate(new Date().getDate() + 4) /**Set default date date to next 4 date*/ 
		]
	};
</script>

<input name="defaultDate" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Result:

Value:

Please select date from above input.

Set min/max date

Set a min/max date to a date picker

.svelte
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const todayDate = new Date(); 
	const options = {
		mode: 'multiple',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: 'd F Y',
		minDate: new Date().setDate(todayDate.getDate() - 5) /*set min date to 5 day ago**/, 
		maxDate: new Date().setDate(todayDate.getDate() + 5) /*set max date to 5 day later**/ 
	};
</script>

<input name="minMaxDate" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Result:

Value:

Please select date from above input.

Set disable date

Disable any date in calendar

.svelte
+
+
+
+
+
<script>
    import svlatepickr from 'svelte-flatpickr-plus';
    const todayDate = new Date(); 
    const options = {
        mode: 'multiple',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'd F Y',
        disable: [
            new Date().setDate(todayDate.getDate() - 2),/*disable a date that 2 days ago**/ 
            new Date().setDate(todayDate.getDate() + 2)/*disable a date that 2 days later**/ 
            ]
    };
</script>

<input name="disableDate" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Result:

Value:

Please select date from above input.

Hooks

Build a date picker with hooks options

Hooks

You can check all supported hooks name here

.svelte
+
+
+
+
+
+
+
+
+
+
+
<script>
    import svlatepickr from 'svelte-flatpickr-plus';
    const options = {
        mode: 'multiple',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'd F Y',
        onChange: (selectedDates, dateStr) => {
                console.log('on change hook!');
                console.log(selectedDates);
                console.log(dateStr);
            },
            onOpen: (selectedDates, dateStr) => {
                console.log('on open hook!');
            },
            onClose: (selectedDates, dateStr) => {
                console.log('on close hook!');
            }
    };
</script>

<input name="hooks" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Result: open developer tools and checking console for hooks results

Value:

Please select date from above input.

Listen to events

Listen to event of the date picker from input and with that you can get
selectedDates, dateStr or instance data with detail object from callback Event data

Events

All supported events name is just like as hooks name but in all lower case.
you can check all supported hooks name here

onchange event

With onchange event you can not access to detail object because
onchange event itself is a DOM Native Event that cannot modify and adding detail object. By the way you can using onvalueupdate event instead to access to detail object from callback Event data or you can using hooks approach instead

.svelte
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<script>
    import svlatepickr from 'svelte-flatpickr-plus';
    const options = {
        mode: 'multiple',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'd F Y'
    };

    const changeHandler =(event)=>{
        console.log('event change!')
    }

    const valueUpdateHandler = (event) => {
        if (event.detail) {
           const { selectedDates, dateStr, instance } = event.detail;
           console.log('event value update!', { selectedDates, dateStr, instance });
        }
    };

    const openHandler = (event) => {
    	console.log('event open!');
    };

    const closeHandler = (event) => {
    	console.log('event close!');
    };
</script>

<input
    name="eventDate"
	onchange={changeHandler}
	onvalueupdate={valueUpdateHandler}
	onopen={openHandler}
	onclose={closeHandler}
    use:svlatepickr={options}
/>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Result: open developer tools and checking console for events results

Value:

Please select date from above input.

Reference to a DOM node

You can binding the DOM node of date picker with bind:this directive and you can access a flatpickr instance with ._flatpickr.

Flatpickr instance

With access to instance of flatpickr you can using any properties and method that flatpickr provide here

.svelte
+
+
+
+
+
+
<script>
    import svlatepickr from 'svelte-flatpickr-plus';
    let datePickerElement; 
    const options = {
        mode: 'multiple',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'd F Y'
    };

    function clearDatePicker(){
        datePickerElement._flatpickr.clear();
    }
</script>

<input name="domDate"
 bind:this={datePickerElement}
 use:svlatepickr={options} />

<button onclick={clearDatePicker}> Clear </button>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Result:

Value:

Please select date from above input.

Control clear behavior

Control on .clear() behavior with resetMoveDefault and resetToDefault in options

resetMoveDefault

with resetMoveDefault as true (by default) while instance of date picker got reset with .clear() it will move calendar to a default (or today date if defaultDate not set in options), if it set to false this the calendar will stay on a latest position of a date before.

resetToDefault

with resetToDefault as true (by default) while instance of date picker got reset with .clear() a value in input DOM will be reset back to a default date (or empty string if it set to be false or defaultDate not set in options)

.svelte
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const todayDate = new Date();
	const options = {
                mode: 'multiple',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: 'd F Y',
		defaultDate: [
			new Date(),
			new Date().setDate(new Date().getDate() + 2) date,
			new Date().setDate(new Date().getDate() + 4)date
		],
		resetMoveDefault: false, 
		resetToDefault: false 
	};
</script>

<input name="clearBehaviorDate" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Result:

Value:

Please select date from above input.

External element

Can using a datepicker action on external element (aka. wrapper element) such as
div by passing wrap: true as a additional option and adding data-input
as a attribute to input element.

IMPORTANT

The selector for flatpickr should be the wrapping div with class
flatpickr not the input tag.

.svelte
+
+
+
+
+
+
<script>
    import svlatepickr from 'svelte-flatpickr-plus';

    const options = {
        mode: 'multiple',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'd F Y',
        wrap: true 
    };
</script>


<div use:svlatepickr={options}>
    <input name="wrapDate" data-input />
    <button type="button" title="toggle" data-toggle> toggle </button>
    <button type="button" title="clear" data-clear> clear </button>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Result:

Value:

Please select date from above input.

Localize date picker

In this example will using Thai language by adding locale: Thai in options
while Thai is imported from l10n and using Buddhist era by adding useLocaleYear: true in options

Support locales

You can check supported locales here

Wrong locale year

If your localize file giving wrong locale year please let me know by open a issue here with tag localize

.svelte
+
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	import { l10n } from '$lib'; 
	const thaiLocale = l10n.th; 

	const options = {
		mode: 'multiple',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: 'd F Y',
		locale: thaiLocale, 
		useLocaleYear: true 
	};
</script>

<input name="localizeDate" use:svlatepickr={options} />
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Result:

Value:

Please select date from above input.

Using in form action

.svelte
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<script>
    import svlatepickr from 'svelte-flatpickr-plus';
    import {formDataToJson} from '$lib/utils.js'
     let informDatePickerElement;
     const altInputOptions = {
        mode: 'multiple'
    	dateFormat: 'Z' /*set as ISO Date format**/,
    	altInput: true,
    	altFormat: 'd F Y',
     };
     const defaultDateOptions ={
    	...altInputOptions,
    	defaultDate: new Date()
    }
     const wrapOptions ={
    	...altInputOptions,
    	wrap: true
     }

     const beforeSubmitHandler = ({ formElement, formData, cancel }) => {
    	formDataJSON = formDataToJson(formData)
    	cancel();
    	formElement.reset();
     }
</script>

<form name="datePickerForm" method="POST" use:enhance={beforeSubmitHandler} >
	<section>
		<label for="datePicker_1">Multiple date picker:
		<br />
		<input name="datePicker_1" use:svlatepickr={altInputOptions}>
	</section>
	<br />
	<section>
		<label for="datePicker_2">Multiple date picker with initial date: </label>
		<br />
		<input id="datePicker_2" name="datePicker_2" use:svlatepickr={defaultDateOptions} />
	</section>
	<br />
	<section>
		<label for="datePicker_3">Multiple date picker with flatpickr element binding: </label>
		<br />
		<input
			id="datePicker_3"
			name="datePicker_3"
			bind:this={informDatePickerElement}
			use:svlatepickr={defaultDateOptions}
		/>
		<button type="button" onclick={()=>{informDatePickerElement._flatpickr.clear()}}>
			Clear
		</button>
	</section>
	<br />
	<section>
		<label for="datePicker_4">Multiple date picker with wrapper</label>
		<br />
		<div use:svlatepickr={wrapOptions}>
			<input id="datePicker_4" name="datePicker_4" data-input />
			<button type="button" title="toggleInFrom" data-toggle> toggle </button>
			<button type="button" title="clearInFrom" data-clear> clear </button>
		</div>
	</section>
	<br />
	<div>
		<div>
			<button type="submit">Submit</button>
			<button type="reset">Reset</button>
		</div>
	</div>
</form>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

Result :








Form data JSON:

Please submit form above

Last update at: 2024/12/17 03:25:09