GitHub - ankurk91/vue-flatpickr-component: Vue.js component for Flatpickr datetime picker :calendar: (original) (raw)

Vue FlatPickr Component

Vue.js component for Flatpickr date-time picker.

Vue.js version	Package version	Branch
2.x	8.x	8.x
3.x	12.x	main

Reactive v-model value
- You can change flatpickr value programmatically
Reactive config options
- You can change config options dynamically
- Component will watch for any changes and redraw itself
Can emit all possible events
Compatible with Bootstrap or any other CSS framework
Supports wrapped mode
Works with validation libraries

npm install vue-flatpickr-component@^11

Using Bootstrap input group and Font Awesome icons

Select a date

Toggle Clear

Selected date is - {{date}}

The component can emit all possible events, you can listen to them in your component

<flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"/>

Event names has been converted to kebab-case.
You can still pass your callback methods in :config like original flatpickr do.

The component accepts these props:

Attribute	Type	Default	Description
v-model	String / Date Object / Array / Timestamp / null	null	Set or Get date-picker value (required)
config	Object	{ wrap: false }	Flatpickr configuration options
events	Array	Array of sensible events	Customise the events to be emitted

Please see CHANGELOG for more information what has changed recently.

MIT License