Vue.js Component for Flatpickr Datetime Picker

Install & Download:

# Yarn
$ yarn add vue-flatpickr-component
# NPM
$ npm install vue-flatpickr-component --save

Description:

This is a Vue.js component for the Flatpickr DateTime picker.

Features

• 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

Basic usage:

1. Import and register the Flatpickr component.

import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
export default {
  components: {
    flatPickr
  }
}

2. Add the component to the template.

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

Preview:

Changelog:

v11.0.5 (03/05/2024)

• Bugfix

v11.0.4 (02/16/2024)

• Bugfix

v11.0.1 (10/29/2022)

• Rewrite to Typescript

v10.0.0 (10/21/2022)

• Major update

v9.0.8 (10/16/2022)

• Bugfix

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