Vue.js Component for Flatpickr Datetime Picker

This is a Vue.js component for the Faltpickr DateTime 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
    • 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
  • Play nice with vee-validate validation library


Vue.js Component for Flatpickr Datetime Picker


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:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-flatpickr-component

$ npm install vue-flatpickr-component --save

Add Comment