Vue-flatpickr-component NPM

Vue FlatPickr Component

Vue.js component for Flatpickr date-time picker.

Demo or JSFiddle

Version matrix

Vue.js version	Package version	Branch
2.x	8.x	8.x
3.x	11.x	`main`

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
Can emit all possible events
Compatible with Bootstrap or any other CSS framework
Supports wrapped mode
Works with validation libraries

Installation

npm install vue-flatpickr-component@^11

Usage

Minimal example

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

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

    const date = ref(null);
</script>

Detailed example

Using Bootstrap input group and Font Awesome icons

<template>
    <section>
        <div class="form-group">
            <label>Select a date</label>
            <div class="input-group">
                <flat-pickr
                    v-model="date"
                    :config="config"
                    class="form-control"
                    placeholder="Select date"
                    name="date"/>
                <div class="input-group-append">
                    <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>
                    <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>
                    </button>
                </div>
            </div>
        </div>
        <pre>Selected date is - {{date}}</pre>
    </section>
</template>

<script setup>
    import {ref} from 'vue';
    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 - https://flatpickr.js.org/themes/
    import 'flatpickr/dist/themes/material_blue.css';
    // localization is optional
    import {Hindi} from 'flatpickr/dist/l10n/hi.js';

    const date = ref('2022-10-28');

    // Read more at https://flatpickr.js.org/options/
    const config = ref({
        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          
    });
</script>

Events

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"/>

Event names has been converted to kebab-case.
You can still pass your callback methods in :config like original flatpickr do.

Available props

The component accepts these props:

Attribute	Type	Default	Description
v-model	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 sensible events	Customise the events to be emitted

Use in browser with CDN

<!-- Flatpickr related files -->
<link href="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11"></script>
<script>
    const app = Vue.createApp({})
    app.component('flat-pickr', VueFlatpickr.default);
    app.mount("#app");
</script>