Vue.js component for Flatpickr datetime picker :calendar:

Overview

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

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

Installation

# yarn
yarn add vue-flatpickr-component

# npm
npm install vue-flatpickr-component

Usage

Minimal example

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

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">
        </flat-pickr>
        <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>
            </i>
          </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>
            </i>               
          </button>
        </div>
      </div>
    </div>
    <pre>Selected date is - {{date}}</pre>
  </section>
</template>

<script>
  // 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 - https://flatpickr.js.org/themes/
  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 https://flatpickr.js.org/options/
        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: {
      flatPickr
    },    
  }
</script>

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')
  app.use(VueFlatPickr);

This will register a global component <flat-pickr>

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"></flat-pickr>
  • 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="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.js"></script>
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
// Initialize as global component
yourAppInstance.component('flat-pickr', VueFlatpickr);
</script>

Run examples on your localhost

  • Clone this repo
  • You should have node-js 12.14.0>= and yarn >=1.x pre-installed
  • Install dependencies yarn install
  • Run webpack dev server yarn start
  • This should open the demo page at http://localhost:9000 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 yarn test

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

Comments
  • Picker remains focused after clicked outside

    Picker remains focused after clicked outside

    @ankurk91 As we are opening a picker to select a date and if we are not selecting a date and clicks outside, in this case datepicker remains as selected (focused).

    And due to this, we need to click outside again to make it unselected.

    Is there any solution for this ?

    opened by mtilokani 25
  • Dynamically changing minDate/maxDate (date range picker)

    Dynamically changing minDate/maxDate (date range picker)

    [x] Other, please describe Not sure if it's a bug or I am using it wrong (sorry for that).

    Tell about your platform

    • flatPickr version : 3.0.0 (from unpkg)
    • Vue.js version : 2.4.2 (from unpkg)
    • Browser name and version : Chrome 55.0

    Current behavior Changing minDate and maxDate in the config objects does not trigger component redraw.

    Expected behavior Changing the dates in the fiddle below should update both pickers accordingly to allow proper date range selection (startDate < endDate).

    Minimal reproduction of the problem with instructions JSFiddle

    1. Change date in any picker from the example
    2. The other should update it's bounds accordingly (but it doesn't, so I can select an invalid date range with endDate before startDate like 2017-08-29 ~ 2017-08-10, for example)

    P.S.: Thank you for creating this component. I was searching for a long time for a good-looking date picker, now the only thing left is getting it to work for me :smiley:

    opened by RaZeR-RBI 24
  • [8.x] Incorrect date time display

    [8.x] Incorrect date time display

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    
    • flatPickr version : 4.6.9
    • Vue.js version : 2.6.12
    • Browser name and version : Chrome
    • This package version : 8.1.7

    Current behavior When I set up the date-time value is "01/02, 20:00" 01 February but the Flatpick displays the wrong time. Flatpick displays the wrong time Here is my config

     monthConfig: {
            dateFormat: 'm/d, H:i',
            enableTime: true,
            time_24hr: true,
          }
    

    date time value "01/02, 20:00"

    Result image

    Reproduction https://codesandbox.io/s/serene-cherry-hmqicb?file=/src/components/HelloWorld.vue

    need-more-info 
    opened by huypxgear 14
  • Vue 3 support

    Vue 3 support

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [x] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • flatPickr version : 4.6.6
    • Vue.js version : 3.0.0-0
    • Browser name and version : Chrome 85.0.4183.83 (Official Build) (64-bit)
    • This package version : 8.1.6

    Current behavior

    runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function 
      at <FlatPickr modelValue=null onUpdate:modelValue=fn > 
      at <App>
    warn @ runtime-core.esm-bundler.js?5c40:38
    
    runtime-core.esm-bundler.js?5c40:216 Uncaught TypeError: t is not a function
        at Proxy.render (vue-flatpickr.min.js?c38f:1)
        at renderComponentRoot (runtime-core.esm-bundler.js?5c40:535)
        at componentEffect (runtime-core.esm-bundler.js?5c40:4286)
        at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
        at effect (reactivity.esm-bundler.js?a1e9:17)
        at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4269)
        at mountComponent (runtime-core.esm-bundler.js?5c40:4227)
        at processComponent (runtime-core.esm-bundler.js?5c40:4183)
        at patch (runtime-core.esm-bundler.js?5c40:3788)
        at mountChildren (runtime-core.esm-bundler.js?5c40:3996)
    

    Expected behavior Works the same as when using vue 2

    Minimal reproduction of the problem with instructions

    See: https://github.com/mabarbeau/demo-vue-3-flatpickr-component

    OR

    1. Update vue-cli
    2. vue create demo-vue-3-flatpickr-component
    3. Select "Default (Vue 3 Preview) ([Vue 3] babel, eslint)"
    4. Create a componet using the minimal example
    enhancement 
    opened by mabarbeau 13
  • IE11 support?

    IE11 support?

    I'm submitting a ... (check one with "x")

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • flatPickr version : 4.x
    • Vue.js version : 2.x.x
    • Browser name and version : Internet Explorer 11 (IE11) 11.309.16299.0 on Windows 10 Pro 1709 16299.309.
    • This package version : 7.x.x

    Current behavior The date picker does not open with IE11. Even on the official JSFiddle: https://jsfiddle.net/ankurk91/63kzdwLx/

    Expected behavior The date picker should open. It works in other browsers (tested with Firefox, Chrome and Edge on Windows).

    Minimal reproduction of the problem with instructions

    Open the JSFiddle with IE11 on Windows. Click on the input field. The date picker does not show up with IE11.

    unable-to-reproduce upstream-limitation 
    opened by Thib-G 13
  • How to use open() on vuejs

    How to use open() on vuejs

    I'm submitting a ... (check one with "x")

    [x] How to trigger open() on vuejs
    

    Tell about your platform

    • flatPickr version : 4.0.0
    • Vue.js version : 2.1.10
    • Browser name and version : Chrome
    • This package version : 4.0.0

    Current behavior NONE

    Expected behavior Trigger flatpickr with custom button

    Minimal reproduction of the problem with instructions Below is my code: Index.vue

    <template>
    <div>
    <button @click="chooseBooking" class="btn btn-pink">Book Now</button>
    </div>
    </template>
    <script>
        import flatPickr from 'vue-flatpickr-component';
        import 'flatpickr/dist/flatpickr.css';
        import 'flatpickr/dist/themes/material_blue.css'
        export default {
            components: {
                flatPickr
            },
            data(){
                date: new Date()
            },
            methods: {
                    chooseBooking(){
                             // Trigger flatpickr
                    }
            }
        }
    </script
    
    support 
    opened by youyi1314 12
  • AM/PM switch does not always work when selecting a time

    AM/PM switch does not always work when selecting a time

    [ x ] Bug report

    Tell about your platform

    • flatPickr version : 3.0.6
    • Vue.js version : 2.3.3
    • Browser name and version : Chrome|Firefox|Safari x.x.x
    • This package version : 2.4.1

    Current behavior and reproduction

    When using a date and time picker you are unable to swap from PM to AM until you use the hour fields spinner to get to the AM state. After the AM state has been reached once then you can click on AM/PM to change.

    Edit: After a bit more testing it appears that it is simply that the the AM/PM is always stuck on PM when the hour is set to 12 PM.

    Expected behavior

    A user should be able to click on the AM/PM switch at any time and change it.

    upstream-limitation 
    opened by Dahje 12
  • [8.x] Error initialising component

    [8.x] Error initialising component

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    

    Environment:

    • flatPickr version : 4.6.9
    • Vue.js version : 2.6.12
    • Browser name and version : Chrome 89.0.4389.82
    • This package version : 8.1.6

    Current behavior Once component loads, inputs keep disabled and some console errors shows up. ReferenceError: Cannot access 'e' before initialization TypeError: Cannot read property 'addEventListener' of undefined Screenshot 2021-03-15 at 15 36 00

    Expected behavior Having the input enabled to be able to pick a date.

    Minimal reproduction of the problem with instructions

    need-more-info 
    opened by admxxi 11
  • Add blur event for validation libraries

    Add blur event for validation libraries

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [x] Feature request
    [ ] Other, please describe
    

    A PR (#22) was opened a while back adding the blur event, and you said you couldn't see a use case and that it would mean other events would need adding. In our application, there is a use case for this, and that is when using the vuelidate where validations can be triggered when a field is blurred. Currently I cannot apply this with vue-flatpickr due to this event not being registered/emit.

    I don't disagree with your statement that it may make sense then to allow other events to be added such as keyboard events, however since Vue 2.4 it is possible to simply bind all listeners provided to a component via the $listeners property.

    This would allow the developer to decide which listener they wish to bind rather than vue-flatpickr having to pick and choose. I don't know the all of the code, but at a quick glance it would as simple as changing the template of the component to

    <input type="text" data-input v-on="inputListeners">
    

    and adding a computed property

    inputListeners() {
      let vm = this;
      return Object.assign({},
        vm.$listeners,
        {
          input: vm.onInput,
        }
      );
    }
    

    With this change, I would be able to do something like

    <flat-pickr
      v-model="model"
      :config="config"
      @blur="onBlur"
      @keydown="onKeydown">
    
    enhancement 
    opened by pareeohnos 11
  • How to use vue-flatpickr without input text box

    How to use vue-flatpickr without input text box

    I'm submitting a

     Help request
    

    Tell about your platform

    • flatPickr version : 4.x.x
    • Vue.js version : 2.x.x
    • Browser name and version : Chrome|Firefox|Safari x.x.x

    We can programatically open flatpickr. But When i include <flat-pickr v-model="date"></flat-pickr> text box get created. Is there any way to open flatpicker on button click without include text box ?

    already-implemented 
    opened by rajagopalx 11
  • Don't send input event on programmaticly change date

    Don't send input event on programmaticly change date

    I'm submitting a ...

    [X] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    
    • flatPickr version : 4.2.4
    • Vue.js version : 2.5.13
    • Browser name and version : Chrome 63.0.3239.132
    • This package version : 6.2.0

    Current behavior When updating a date programatically, it sends an input event

    Expected behavior It shouldn't send an input event

    Minimal reproduction of the problem with instructions I don't think it should send back an input event. We already know that...

    Here for the setDate, the second parameter should be false https://github.com/ankurk91/vue-flatpickr-component/blob/master/src/component.vue#L132

    Imagine I've a dropdown to select pre-defined dates, and I've a custom entry for custom date. When I listen for input event,, I set the dropdown value to custom, and after the datepicker fire an event, which make the dropdown do it's thing and so on.

    I believe that this date change should be done silently.

    wontfix 
    opened by paparent 11
Owner
Ankur Kumar
Open Source Fanatic | Tinkerer | Spotify Addict
Ankur Kumar
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 May 1, 2020
Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 Feb 7, 2019
A Vue Component to pick a ranged datetime in calendar

A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.

Nico Limbara 18 Oct 28, 2022
Vue Nuxt Scroll Datepicker - Fast, powerful and easy to use component datetime picker for Nuxt Vue

Vue Nuxt Scroll Datepicker - Cashbac In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use comp

mohammad ichlas 2 Apr 25, 2022
Fast, powerful and easy to use component datetime picker for VueJS

Vue Datetime Picker Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable dat

Vladyslav Shchepotin 31 Nov 24, 2022
Vuetify datetime picker with input fields

Vuetify plugin VDatetimeField Vuetify datetime picker with input fields ?? Featu

null 2 Aug 23, 2022
Vue3-daterange-picker - Date range picker component for vue made without jQuery dependency

vue3-daterange-picker A modified date range picker to run on Vue 3. The componen

ADEGBOYE JOSHUA 2 Aug 31, 2022
Vue Time Picker - A simple time picker for Vue with a Bootstrap style

Vue Time Picker - A simple time picker for Vue with a Bootstrap style

Justin Dowty 0 Feb 13, 2020
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 706 Nov 21, 2022
Jalaali calendar and datepicker for vue.js 2

vue-jalaali-datepicker Jalaali calendar and datepicker for vue.js 2 Demo Requirements Vue.js ^2.0.0 moment-jalaali ^0.6.0 Installation npm $ npm insta

Peyman 13 Nov 24, 2022
A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Trevor Stacy 56 Nov 16, 2022
Vue date range picker component

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out

Krystal Campioni 769 Dec 29, 2022
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 346 Jan 3, 2023
A Color Picker Component Based on Vue And Element-UI Supports Drag And Drop

@toc Introduction 简介 This is a color picker component based on vue and element-ui. It is powerful and supports drag and drop, color picking and other

null 0 Dec 7, 2021
An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

Krijan Niroula 2 Dec 4, 2021
VueJS Monthly Picker component

vue-monthly-picker Vue Monthly Picker Components Checkout demo at https://ittus.github.io/vue-monthly-picker/ Support Install npm install vue-monthly-

Thang Minh Vu 64 Nov 26, 2022
Custom column type for RevoGrid component based on duetds-date-picker library

Custom column type for RevoGrid component based on duetds-date-picker library

Revolist 3 Apr 19, 2022
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

Vue2 Timepicker ?? Dead repo recharged ?? A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support. Demo You can see

Phoenix Wong 432 Dec 26, 2022
🕒 Simply customizable powerful time picker for Vue.js

vue-timeselector ?? Simple customizable Vue.js timepicker component vue-timeselector is a Vue (2.x) component that gives you ability to select a time

Alexis Colin 42 Nov 23, 2022