Awesome

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>

Run examples on your localhost

Clone this repo
Make sure you have node-js >=20.11 and pnpm >=9.x pre-installed
Install dependencies pnpm install
Run webpack dev server npm start
This should open the demo page in your default web browser

Testing

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

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License