Svelte-flatpickr-plus NPM

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

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