Vue.js component for Flatpickr date-time picker.
| Vue.js version | Package version | Branch |
|---|---|---|
| 2.x | 8.x | 8.x |
| 3.x | 12.x | main |
- Reactive
v-modelvalue- 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
npm install vue-flatpickr-component@^11<template> <flat-pickr v-model="date"/> </template> <script setup> import {ref} from 'vue'; import flatPickr from 'vue-flatpickr-component'; import 'flatpickr/dist/flatpickr.css'; const date = ref(null); </script>Using Bootstrap input group and Font Awesome icons
<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"/> <div class="input-group-append"> <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> </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> </button> </div> </div> </div> <pre>Selected date is - {{date}}</pre> </section> </template> <script setup> import {ref} from 'vue'; 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://flatpickr.js.org/themes/ import 'flatpickr/dist/themes/material_blue.css'; // localization is optional import {Hindi} from 'flatpickr/dist/l10n/hi.js'; const date = ref('2022-10-28'); // Read more at https://flatpickr.js.org/options/ const config = ref({ 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 }); </script>- 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"/>- Event names has been converted to kebab-case.
- You can still pass your callback methods in
:configlike original flatpickr do.
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 |
<!-- 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@3.3"></script> <!-- Lastly add this package --> <script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11"></script> <script> const app = Vue.createApp({}) app.component('flat-pickr', VueFlatpickr.default); app.mount("#app"); </script>- Clone this repo
- Make sure you have node-js
>=20.11and pnpm>=9.xpre-installed - Install dependencies
pnpm install - Run webpack dev server
npm start - This should open the demo page in your default web browser
- 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
Please see CHANGELOG for more information what has changed recently.
MIT License