Vue FlatPickr Component

Vue.js component for Flatpickr date-time picker

:point_right: If you are looking for the documentation of older version then switch to respective version branch.

Demo or JSFiddle

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
  • You are suggested to modify config via Vue.set
• Can emit all possible events
• Compatible with Bootstrap, Bulma or any other CSS framework
• Supports wrapped mode
  • Just set wrap:true in config and component will take care of all
• Works with vee-validate and other validation libraries

Installation

# npm
npm install vue-flatpickr-component --save

# Yarn
yarn add 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

This example is based on Bootstrap 4 input group

<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-btn">
          <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://chmln.github.io/flatpickr/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
        date: new Date(),
        // Get more form https://chmln.github.io/flatpickr/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 Vue from 'vue';
  import VueFlatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';
  Vue.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>

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

Available props

The component accepts these props:

Install in non-module environments (without webpack)

<!-- 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@2.5"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@8"></script>
<script>
// Initialize as global component
Vue.component('flat-pickr', VueFlatpickr);
</script>

Run examples on your localhost

• Clone this repo
• You should have node-js >=6.10 <7.0.0 || >=9.x 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.

Caveats

• :warning: Don't pass config option as inline literal object to :config prop.

  <!-- This will cause date picker to freeze -->
  <flat-picker v-model="card" :config="{dateFormat: 'd-m-Y H:i'}"></flat-picker>

• Vue.js can not detect changes when literal object/arrays passed within template, see

License

MIT License

Changelog

8.0.0

• Fix: #107
• Change: remove onKeyDown event, see #100. This is the only breaking change.

7.0.6

• Fix: blur event when altInput is true, #102

7.0.5

• Add: blur event, #102

7.0.4

• Fix: umd build in webpack v4, #89

7.0.3

• Re-release v7.0.2, npm malfunction during publish, #87
• Chore: update webpack to v4.x

7.0.2

• Fix: Allow to update locale dynamically, fixes #77

7.0.1

• Fix: Don't mutate config object, fixes #74
• Fix: Delete all event callbacks before passing them to flatpickr in config watcher

7.0.0

• Change: Limit the default events to be emitted, read more, #53
  • You can restore the old behaviour by using events props

6.2.0

• Change: Don't emit on-change on component mount
• Add: on-pre-calendar-position event

6.1.0

• Add: events props to customise the emitted events, closes #53

    <flatpickr v-model="date" :events="['onChange']">

  • events prop is optional and component emits all events when prop is not specified.

6.0.0

• Add: emit all events, fixes #37
• Fix: dynamically change configs, closes #20
• Change: export name, default export remains same

5.0.5

• Internal: Remove the need of Object.assign

5.0.4

• Revert the changes made in v5.0.3

5.0.3

• Fix: a bug where changes in config object properties were not being detected

5.0.2

• Fix: input event was being emitted twice, #44, #29

5.0.1

• Fix: Don't update DOM when allowInput is set to true in config

5.0.0 (breaking)

• Change:
  • input-class prop has been removed, you can always use Vue.js inbuilt class binding

    <flat-pickr v-model="date" class="form-control input"></flat-pickr>

  • Similarly name, id, placeholder and required props has been removed, you can still specify any number of attributes on component

      <flat-pickr v-model="date" name="date-of-birth" id="js-date" placeholder="Select date" aria-required="true"></flat-pickr>

  • Non module environment usage, no longer required to call .default

    Vue.component('flat-pickr', VueFlatpickr);

• Add:
  • Allow timestamps as value

4.0.0 (breaking)

• Change:
  • Upgrade to flatpickr v4.x
  • Change onChange event name to on-change
• Fix:
  • v-model validator method typo
  • IE11 support
• tests: add test case with coverage
• chore: dist folder is no longer a part of repo, it will be published on npm only. It means bower no longer supported.

3.1.3

• Fix: value prop validation

3.1.2

• Fix: Prevent multiple onChange event after component destroy, #27

3.1.1

• Fix: Prevent onChange event being emitted twice

3.1.0

• Add: Emit onChange event, #20

3.0.0 (Breaking)

• Change: flatPicker.vue file name to component.vue
  • This will be breaking for users who were directly importing .vue file
• Change: Don't force form-control CSS class on input field, #18
  • If you wants to add a new class on input, you need to do like this
  • <flatpickr input-class="form-control custom-css-class">
  • :class prop will replace default CSS class on input field
• Add: Ability to pass component name when used as plugin
  • Vue.use(flatPickr,'date-picker')
  • You can pass name as second parameter
• Chore: Upgrade to webpack v3.x

2.4.0

• Fix UglifyJS issue

2.3.0

• New way to use as plugin, old one is deprecated, see new example
  • You should NOT import plugin like this
  • import {flatPickrPlugin} from 'vue-flatpickr-component';
• Add id prop

2.2.0

• Rollback importing css, component is no longer importing any css
  • This also applies when using this package as plugin Vue.use()

2.1.0

• Expose install method, so that now you can use this package as a plugin

2.0.0 (breaking)

• Rename input-name prop to name
• No longer support flatpickr v2.x, always pull v3.x
• No longer importing flatpickr css, you need to import css by yourself, see examples

1.2.4

• Improve value prop validation

1.2.3

• Add value prop validation

1.2.0

• Allow flatPickr v3.x stable
• Rename instance to fp, if you were accessing it through $refs this may be a breaking change for you

1.1.3

• Regenerate build files

1.1.2

• Allow array of objects and date object as default value

1.1.0

• Make wrap optional
• From now, you need to wrap by your-self and pass config.wrap as true
• No longer force bootstrap, you are free to use any of CSS framework

1.0.0

• Initial release