vue-flatpickr——封装了好看又强大的时间选择器 Flatpickr 的 Vue 组件

A Vue component that wraps the Flatpickr.

Install

npm install vue-flatpickr

Enter one of your .vue file, load the instance VueFlatpickr-en.vue (or VueFlatpickr-zh for Chinese), and the stylesheet flatpickr.min.css.

Note that you have set the correct path, for example you might set the path as ../node_modules/vue-flatpickr/VueFlatpickr-en.vue and so on.






@import './assets/flatpickr.min.css';

Use props to pass the options object to vue-flatpickr. The options are same to the official document. Here is an example below:





data() {
    return {
      fpOptions: {
        enableTime: true
      }
    }
  }

The tag could be use as a normal tag, which you can use v-model to bind data withVue model:

vue-flatpickr supports all the offical themes, all you need to do is to pick up the one you like:

MIT