Newly Paranoid Maintainers


    9.0.6 • Public • Published

    Vue FlatPickr Component

    downloads jsdelivr npm-version github-tag build codecov license

    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 9.x master


    • 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
      • Just set wrap:true in config and component will take care of all
    • Works with validation libraries


    npm install vue-flatpickr-component@^9


    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

    Using Bootstrap input group and Font Awesome icons

            <div class="form-group">
                <label>Select a date</label>
                <div class="input-group">
                        placeholder="Select 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 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 can be a date object as well
                    date: '2020-10-16',
                    // 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 {createApp} from 'vue';
    import VueFlatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';
    // Your app initialization logic goes here
    const app = createApp().mount('#app')

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

    Install in non-module environments (without webpack)

    <!-- Flatpickr related files -->
    <link href="" rel="stylesheet">
    <script src=""></script>
    <!-- Vue js -->
    <script src=""></script>
    <!-- Lastly add this package -->
    <script src=""></script>
        const app = Vue.createApp({}).mount("#app");
        app.component('flat-pickr', VueFlatpickr);

    Run examples on your localhost

    • Clone this repo
    • Make sure you have node-js >=16.9 and pnpm >=6.23 pre-installed
    • Install dependencies pnpm install
    • Run webpack dev server npm start
    • This should open the demo page 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 npm test


    Please see CHANGELOG for more information what has changed recently.


    MIT License


    npm i vue-flatpickr-component

    DownloadsWeekly Downloads






    Unpacked Size

    31.6 kB

    Total Files


    Last publish


    • ankurk91