Migration from V1

Importing

Svelte-flatpickr-plus has changed from 4 actions (datePicker, monthPicker, dateRangePicker and monthRangePicker) into only 1 action that you can name it by yourself.

.svelte
-
-
-
-
-
-
+
<script>
	 import {
		datePicker, 
		monthPicker, 
		dateRangePicker, 
		monthRangePicker 
	} from 'svelte-flatpickr-plus'; 

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

Date picker

With a normally date picker you can just using your named action into use: directive.

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

<input use:datepicker /> 
<input use:svlatepickr />
svelte

Date range picker

With a date range picker you need to adding options object with mode: 'range' and passing it into your named action

.svelte
+
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const options ={
	    mode: 'range'
	};
</script>

<input use:svlatepickr={options} />
svelte

Month picker

With a month picker you need to adding options object with isMonthPicker: true and passing it into your named action

.svelte
+
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const options ={
	    isMonthPicker: true
	};
</script>

<input use:svlatepickr={options} />
svelte

Month range picker

With a month range picker you need to adding options object with isMonthPicker: true and mode: 'range' then passing it into your named action

.svelte
+
+
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	const options ={
	    isMonthPicker: true,
	    mode: 'range'
	};
</script>

<input use:svlatepickr={options} />
svelte

Fully support on multiple mode

For now you can using multiple mode on both date picker or month picker

.svelte
+
+
+
+
+
+
+
+
+
<script>
	import svlatepickr from 'svelte-flatpickr-plus';
	// For date picker
	const optionsDatePicker ={
	    mode: 'multiple'
	};

	//For month picker
	const optionsMonthPicker ={
	    isMonthPicker: true,
	    mode: 'multiple'
	};
</script>

<input use:svlatepickr={optionsDatePicker} /> 
<input use:svlatepickr={optionsMonthPicker} />
svelte

Theme Changer

Before user should import it from flatpickr_plus/dist/plugins/themeChanger for now has been renamed into themeChanger and can be imported from
svelte-flatpickr-plus directly and you can get a correct theme name from
themeNames object that you can import from the same directory.

.svelte
-
+
+
-
-
-
-
-
-
+
<script>
	import fpThemeChanger from 'flatpickr_plus/dist/plugins/themeChanger'; 
	import { themeChanger, themeNames } from 'svelte-flatpickr-plus'; 

	let themeName = $state(themeNames.default); 
	
	onMount(() => {
		if (theme) {
			const flatpickrThemePath = 'node_modules/flatpickr_plus/dist/themes/';
			fpThemeChanger(themeName, flatpickrThemePath);
		}
	});

	$effect(async () => {
		if (themeName) {
			themeChanger(themeName); 
		}
	});
</script>
svelte
Last update at: 2024/12/17 03:40:12