Advance usage of Month range 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 = {
		isMonthPicker: true,
		mode: 'range',
		dateFormat: 'Z' /*set as ISO Date format**/ 
	};
</script>

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

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 = {
		isMonthPicker: true,
		mode: 'range',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true, 
		altFormat: 'F Y' 
	};
</script>

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

Result:

Value:

Please select date from above input.

Set default date

Set a default date to input after component is mounted

select one date

If select only one date and click out side of calendar with defaultDate options provided, this will reset a select date range to a default date that provided, if not want it reset into a default date just passing additional options resetToDefault as false.

defaultDate

If sending more than 2 date data in defaultDate options flatpickr will using only the first two date data in array as a default date

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

        function getFirstDaysOfMonth(offset) {
            const date = new Date(); 
            date.setDate(1); 
            date.setMonth(date.getMonth() + offset); 
            date.setHours(0, 0, 0, 0, 0); 
            return date.toISOString(); 
        } 
</script>

<input name="altInput" 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

Result:

Value:

Please select date from above input.

Set min/max date

Set a min/max date to a date picker

minDate

Be careful while setting a minDate please rechecking that minDate is starting from a first date of the month if it not it will cause a problem that you can not select a month even it available to selected.

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

	const options = {
        isMonthPicker: true,
        mode: 'range',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: 'F Y',
		minDate: getFirstDaysOfMonth(-2) /*set min month to 2 month ago**/, 
		maxDate: getFirstDaysOfMonth(2) /*set max month to 2 month later**/ 
	};

	function getFirstDaysOfMonth(offset) {
		const date = new Date(); 
		date.setDate(1); 
		date.setMonth(date.getMonth() + offset); 
		date.setHours(0, 0, 0, 0, 0); 
		return date.toISOString(); 
        } 
</script>

<input name="minMaxDate" 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

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 options = {
        isMonthPicker: true,
        mode: 'range',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'F Y',
        disable: [
            getFirstDaysOfMonth(-2),/*disable a month that 2 days ago**/ 
            getFirstDaysOfMonth(-2)/*disable a month that 2 days later**/ 
        ]
    };

    	function getFirstDaysOfMonth(offset) {
		const date = new Date(); 
		date.setDate(1); 
		date.setMonth(date.getMonth() + offset); 
		date.setHours(0, 0, 0, 0, 0); 
		return date.toISOString(); 
        } 
</script>

<input name="disableDate" 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

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 = {
        isMonthPicker: true,
        mode: 'range',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: 'F Y',
        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!');
            }
    };
</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
23

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 = {
        isMonthPicker: true,
        mode: 'range',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: '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
38

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 = {
        isMonthPicker: true,
        mode: 'range',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: '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
21

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 = {
		isMonthPicker: true,
		mode: 'range',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: 'F Y',
		defaultDate: new 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

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 = {
        isMonthPicker: true,
        mode: 'range',
        dateFormat: 'Z' /*set as ISO Date format**/,
        altInput: true,
        altFormat: '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
19

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 = {
		isMonthPicker: true,
		mode: 'range',
		dateFormat: 'Z' /*set as ISO Date format**/,
		altInput: true,
		altFormat: '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
17

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 = {
    	isMonthPicker: true,
    	mode: 'range',
    	dateFormat: 'Z' /*set as ISO Date format**/,
    	altInput: true,
    	altFormat: '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">Month range picker:
		<br />
		<input name="datePicker_1" use:svlatepickr={altInputOptions}>
	</section>
	<br />
	<section>
		<label for="datePicker_2">Month range picker with initial date: </label>
		<br />
		<input id="datePicker_2" name="datePicker_2" use:svlatepickr={defaultDateOptions} />
	</section>
	<br />
	<section>
		<label for="datePicker_3">Month range 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">Month range 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
71

Result :








Form data JSON:

Please submit form above

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