This is a Vue.js component for the Flatpickr DateTime picker.
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
- Emits 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
- Play nice with vee-validate validation library
Basic usage:
1. Import and register the Flatpickr component.
import flatPickr from 'vue-flatpickr-component'; import 'flatpickr/dist/flatpickr.css'; export default { components: { flatPickr } }
2. Add the component to the template.
<template> <flat-pickr v-model="date"/> </template>
Preview:
Changelog:
v11.0.1 (10/29/2022)
- Rewrite to Typescript
v10.0.0 (10/21/2022)
- Major update
v9.0.8 (10/16/2022)
- Bugfix
v9.0.6 (04/13/2022)
- Fix: Possible undefined error
v9.0.5 (08/29/2021)
- Bugfix
v9.0.4 (07/05/2021)
- Bugfix
v9.0.3 (12/29/2020)
- Bugfix
v9.0.0 (10/09/2020)
- Drop support for Vue v2.x and add support for Vue v3.x
- Drop IE 11 support
v8.1.6 (08/30/2020)
- Bugfix
v8.1.5 (11/04/2019)
- Bugfix
Download Details:
Author: ankurk91
Live Demo: https://ankurk91.github.io/vue-flatpickr-component/
Download Link: https://github.com/ankurk91/vue-flatpickr-component/archive/master.zip
Official Website: https://github.com/ankurk91/vue-flatpickr-component
Install & Download:
# Yarn
$ yarn add vue-flatpickr-component
# NPM
$ npm install vue-flatpickr-component --save