Skip to content
Vue.js component for Flatpickr datetime picker 📆
Branch: master
Clone or download
Latest commit a13f5f3 Mar 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Upgrade deps Feb 10, 2019
__test__ Add disabled prop, fixes #117, #124 Dec 16, 2018
examples Update deps Jan 5, 2019
src Fix: disabled prop, #135 Mar 21, 2019
.babelrc Upgrade deps Feb 10, 2019
.editorconfig Housekeeping Sep 2, 2018
.gitattributes Housekeeping Sep 2, 2018
.gitignore Upgrade deps Feb 10, 2019
.travis.yml Upgrade deps Feb 10, 2019
CHANGELOG.md Version 8.1.2 Mar 21, 2019
LICENSE.txt Housekeeping Jan 7, 2018
README.md Version 8.1.2 Mar 21, 2019
package.json Version 8.1.2 Mar 21, 2019
webpack.config.dev.js Upgrade deps Feb 10, 2019
webpack.config.js Upgrade deps Feb 10, 2019
yarn.lock Upgrade deps Feb 10, 2019

README.md

Vue FlatPickr Component

downloads npm-version github-tag license build-status codecov

Vue.js component for Flatpickr date-time picker

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

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

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

  • ⚠️ 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

You can’t perform that action at this time.