flatpickr - javascript datetime picker
Svelte Flatpickr Plus
Flatpickr is a lightweight and powerful datetime picker. Svelte Flatpickr Plus is a wrapper for Flatpickr with some extra features.
Feature overview:
Demo here
- all features of Flatpickr
- Svelte Flatpickr Plus is just a svelte actions that you can using with use:action directive of svelte on input element with any class or style
- You can using your locale years (e.g. Buddhist Era) with
useLocaleYear
option.
- You can setting a reset behavior with
resetMoveDefault
and resetToDefault
option.
- On a calendar, year input has been replace with year dropdown element for easy to select year.
- Have theme changer plugin to calling and change a theme of calendar while theme has been changed.
Actions
Svelte Flatpickr Plus coming with 4 actions
Installation
npm i svelte-flatpickr-plus
or
pnpm i svelte-flatpickr-plus
Basic Usage
you can import any actions and passing options to that actions that all you need to do
example for build date picker element
<script>
//? import datePicker svelte action from 'svelte-flatpickr-plus'
import { datePicker } from 'svelte-flatpickr-plus';
//? declare any options you want to set in flatpickr
const options = {
dateFormat: 'Z',
altFormat: 'd F Y',
altInput: true
};
</script>
//? using svelte action with html input element and set `options` to it
<input
name="input_datepicker"
use:datePicker={options}
placeholder="please select date"
readonly
/>
demo repl for datePicker action
Compatibility
IE9 and up, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+
Supporting main project - flatpickr
flatpickr will never change its license, pester users for donations, or engage in other user-hostile behavior.
Nevertheless, if you enjoyed working with this library or if its made your life easier, you can buy them a cup of coffee :)
❤️ Go here