Vue.js component for Flatpickr date-time picker
npm install vue-flatpickr-component
!ts
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
``bash`
npm install vue-flatpickr-component@^11
#### Minimal example
`html
`
#### Detailed example
Using Bootstrap input group and Font Awesome icons
`html
:config="config"
class="form-control"
placeholder="Select date"
name="date"/>
Selected date is - {{date}}
`
* The component can emit all possible events, you can listen to them in your component
`html
`
* 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) |{ wrap: false }
| config | Object | | Flatpickr configuration options |
| events | Array | Array of sensible events | Customise the events to be emitted |
`html`
* Clone this repo
* Make sure you have node-js >=20.11 and pnpm >=9.x pre-installedpnpm install
* Install dependencies
* Run webpack dev server
* This should open the demo page in your default web browser
* This package is using Jest
and vue-test-utils for testing.
* Tests can be found in __test__ folder.npm test`
* Execute tests with this command
Please see CHANGELOG for more information what has changed recently.
MIT License