Vue.js component for Flatpickr datetime picker

Category: Vue.js Vue.js Form | July 6, 2021
Author: ankurk91
Official Page: Go to website
Last Update: July 6, 2021
License: MIT

vue flatpicker date picker


Vue FlatPickr Component is a component for Flatpickr date-time picker.


  • 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.
  • It can emit all possible events.
  • It’s compatible with Bootstrap or any other CSS framework
  • It supports wrapped mode
  • It works with validation libraries

How to use it?

  1. Install the component.
# yarn
yarn add vue-flatpickr-component

# npm
npm install vue-flatpickr-component

2. Here is the code that will render the date-time picker.

        <flat-pickr v-model="date"></flat-pickr>

    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';

    export default {
        data() {
            return {
                date: null,
        components: {