Vue.js component for Flatpickr date-time picker
npm install vue-flatpickr-jalili-componentv-model value
bash
npm install vue-flatpickr-jalili-component
`
Usage
#### Minimal example
`html
`
#### Detailed example
Using Bootstrap input group and Font Awesome icons
`html
v-model="date"
:config="config"
class="form-control"
placeholder="Select date"
name="date"/>
Selected date is - {{date}}
`
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`