Vue-Flatpickr (^2.2.0)
Flatpickr
for VueJS
bases on the lastest version of Flatpickr (^2.2.5).
Demo: https://jrainlau.github.io/vue-flatpickr/
Version 2.x supports
VueJS 2.x
only. Check out themaster
branch for supportingVueJS 1.0
Install
npm install vue-flatpickr --save
Usage
Enter your main.js
file which inits the VueJS
:
Vue el: '#app' ...App
then you can use Vue-Flatpickr
directly in your *.vue
file:
<Flatpickr />
Options
Use props
to pass an option object to Vue-Flatpickr
:
<!-- template --><Flatpickr :options="fpOptions" />
// script { return fpOptions: {} }
Vue-Flatpickr
supports all options as the Official Document, except the "Custom elements and input groups"
Data binding
Vue-Flatpickr
supports v-model
for data binding:
<!-- template --><Flatpickr v-model="dateStr" />
// script { return dateStr: '' }
Themes
Vue-Flatpickr
supports all the offical themes. You should import the theme you like from vue-flatpickr/theme
after you've imported the VueFlatpickr
.
Themes you could use:
airbnb.css
base16_flat.css
confetti.css
dark.css
flatpickr.min.css
material_blue.css
material_green.css
material_orange.css
material_red.css
Development
- Run dev
git clone https://github.com/jrainlau/vue-flatpickr.git cd vue-flatpickr && npm install npm run dev
- Run build-demo
npm run build-demo
then checkout the /dist
folder for demo.
- Run build
npm run build
then checkout the /dist
folder for bundle.
Vue-Flatpickr
is usingeslint-standar
, all pull request must follow the standar nor not allow to be merged.
Lisense
MIT