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

Description:

Vue FlatPickr Component is a component for Flatpickr date-time 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.
  • 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.

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

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

    export default {
        data() {
            return {
                date: null,
            }
        },
        components: {
            flatPickr
        }
    }
</script>