@antixrist/vue-flatpickr v2.2.14
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
:
import Vue from 'vue'
import App from './App.vue'
import VueFlatpickr from 'vue-flatpickr'
import 'vue-flatpickr/theme/airbnb.css'
Vue.use(VueFlatpickr)
new 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 -->
data () {
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 -->
data () {
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
.
import VueFlatpickr from 'vue-flatpickr'
import 'vue-flatpickr/theme/airbnb.css'
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
7 years ago