Vue FlatPickr Component
Vue.js component for Flatpickr date-time picker
👉 If you are looking for the documentation of older version then switch to respective version branch.
Demo or JSFiddle
Features
- 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
- You are suggested to modify config via Vue.set
- Can emit all possible events
- Compatible with Bootstrap, Bulma or any other CSS framework
- Supports wrapped mode
- Just set
wrap:true
in config and component will take care of all
- Just set
- Works with vee-validate and other validation libraries
Installation
# npm npm install vue-flatpickr-component --save # Yarn yarn add vue-flatpickr-component
Usage
Minimal example
Detailed example
This example is based on Bootstrap 4 input group
Select a date Toggle Clear Selected date is - {{date}}
As plugin
; ; ; Vue;
This will register a global component <flat-pickr>
Events
- The component can emit all possible events, you can listen to them in your component
- Events names has been converted to kebab-case.
- You can still pass your methods in
:config
like original flatpickr do.
Available props
The component accepts these props:
Attribute | Type | Default | Description |
---|---|---|---|
v-model / value | 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 useful events | Customise the events to be emitted |
Install in non-module environments (without webpack)
<!-- Flatpickr related files --><!-- Vue js --><!-- Lastly add this package -->
Run examples on your localhost
- Clone this repo
- You should have node-js
>=6.10 <7.0.0 || >=9.x
and yarn>=1.x
pre-installed - Install dependencies
yarn install
- Run webpack dev server
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Testing
- This package is using Jest and vue-test-utils for testing.
- Tests can be found in
__test__
folder. - Execute tests with this command
yarn test
Changelog
Please see CHANGELOG for more information what has changed recently.
Caveats
- ⚠️ Don't pass config option as inline literal object to
:config
prop.
<!-- This will cause date picker to freeze -->
- Vue.js can not detect changes when literal object/arrays passed within template, see
License
MIT License