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

Detailed example

Using Bootstrap input group and Font Awesome icons ```html

#### As plugin
```js
  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

Events

• The component can emit all possible events, you can listen to them in your component

  html
  
  

• 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

{ wrap:false }

Install in non-module environments (without webpack)

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