Vue.js component for Flatpickr datetime picker

Vue.js component for Flatpickr datetime picker

Vue.js v2.x component for Flatpickr date-time picker

Vue FlatPickr Component

downloads npm-version github-tag license build-status codecov

Vue.js component for Flatpickr date-time picker

:point_right: If you are looking for the documentation of older version then switch to respective version branch.

Demo or JSFiddle


  • 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
  • Can emit 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
  • Works with vee-validate and other validation libraries


# npm
npm install vue-flatpickr-component --save

# Yarn
yarn add vue-flatpickr-component


Minimal example

    <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: {

Detailed example

This example is based on Bootstrap 4 input group

    <div class="form-group">
      <label>Select a date</label>
      <div class="input-group">
                placeholder="Select date"               
        <div class="input-group-btn">
          <button class="btn btn-default" type="button" title="Toggle" data-toggle>
            <i class="fa fa-calendar">
              <span aria-hidden="true" class="sr-only">Toggle</span>
          <button class="btn btn-default" type="button" title="Clear" data-clear>
            <i class="fa fa-times">
              <span aria-hidden="true" class="sr-only">Clear</span>
    <pre>Selected date is - {{date}}</pre>

  // bootstrap is just for this example
  import 'bootstrap/dist/css/bootstrap.css';
  // import this component
  import flatPickr from 'vue-flatpickr-component';  
  import 'flatpickr/dist/flatpickr.css';
  // theme is optional
  // try more themes at -
  import 'flatpickr/dist/themes/material_blue.css';
  // localization is optional
  import {Hindi} from 'flatpickr/dist/l10n/hi.js';
  export default {
    name: 'yourComponent',
    data () {
      return {
        // Initial value
        date: new Date(),
        // Get more form
        config: {
          wrap: true, // set wrap to true only when using 'input-group'
          altFormat: 'M	j, Y',
          altInput: true,
          dateFormat: 'Y-m-d',
          locale: Hindi, // locale for this instance only          
    components: {

As plugin

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

This will register a global component <flat-pickr>


  • The component can emit all possible events, you can listen to them in your component
<flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"></flat-pickr>
  • Events names has been converted to kebab-case.
  • You can still pass your methods in :config like original flatpickr do.

Available props

The component accepts these props:

Attribute Type Default Description
v-model / value String / Date Object / Array / Timestamp / null null Set or Get date-picker value (required)
config Object { wrap:false } Flatpickr configuration options
events Array Array of useful events Customise the events to be emitted

Install in non-module environments (without webpack)

<!-- Flatpickr related files -->
<link href="[email protected]/dist/flatpickr.min.css" rel="stylesheet">
<script src="[email protected]/dist/flatpickr.min.js"></script>
<!-- Vue js -->
<script src="[email protected]"></script>
<!-- Lastly add this package -->
<script src="[email protected]"></script>
// Initialize as global component
Vue.component('flat-pickr', VueFlatpickr);

Run examples on your localhost

  • Clone this repo
  • You should have node-js >=6.10 <7.0.0 || >=9.x and yarn >=1.x pre-installed
  • Install dependencies yarn install
  • Run webpack dev server yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser


  • This package is using Jest and vue-test-utils for testing.
  • Tests can be found in __test__ folder.
  • Execute tests with this command yarn test


Please see CHANGELOG for more information what has changed recently.


  • :warning: Don't pass config option as inline literal object to :config prop.
<!-- This will cause date picker to freeze -->
<flat-picker v-model="card" :config="{ dateFormat: 'd-m-Y H:i' }"></flat-picker>
  • Vue.js can not detect changes when literal object/arrays passed within template, see


MIT License

Github Repository