Vue FlatPickr Component

!ts

Vue.js component for Flatpickr date-time picker.

Demo or JSFiddle

$3

This version is highly copied from the original with 1 difference which is use of flatpickr of jalali version so basically to support jalali dates thats it !

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
* Works with validation libraries

Installation

``bash
npm install vue-flatpickr-jalili-component
`

Usage

#### Minimal example

`html




`

#### Detailed example

Using Bootstrap input group and Font Awesome icons

`html




`

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

Run examples on your localhost

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

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License