This repository was archived by the owner on Mar 14, 2025. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork103
Vue.js component for Flatpickr datetime picker 📆
License
NotificationsYou must be signed in to change notification settings
ankurk91/vue-flatpickr-component
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Vue.js component forFlatpickr 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
- Reactiveconfig options
- You can change config options dynamically
- Component will watch for any changes and redraw itself
- Can emit all possibleevents
- Compatible withBootstrap or any other CSS framework
- Supportswrapped mode
- Works with validation libraries
npm install vue-flatpickr-component@^11
<template><flat-pickrv-model="date"/></template><scriptsetup>import{ref}from'vue';importflatPickrfrom'vue-flatpickr-component';import'flatpickr/dist/flatpickr.css';constdate=ref(null);</script>
Using Bootstrapinput group and Font Awesome icons
<template><section><divclass="form-group"><label>Select a date</label><divclass="input-group"><flat-pickrv-model="date":config="config"class="form-control"placeholder="Select date"name="date"/><divclass="input-group-append"><buttonclass="btn btn-default"type="button"title="Toggle"data-toggle><iclass="fa fa-calendar"/><spanaria-hidden="true"class="sr-only">Toggle</span></button><buttonclass="btn btn-default"type="button"title="Clear"data-clear><iclass="fa fa-times"/><spanaria-hidden="true"class="sr-only">Clear</span></button></div></div></div><pre>Selected date is - {{date}}</pre></section></template><scriptsetup>import{ref}from'vue';import'bootstrap/dist/css/bootstrap.css';// import this componentimportflatPickrfrom'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 optionalimport{Hindi}from'flatpickr/dist/l10n/hi.js';constdate=ref('2022-10-28');// Read more at https://flatpickr.js.org/options/constconfig=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-pickrv-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 configurationoptions |
| events | Array | Array of sensibleevents | Customise theevents to be emitted |
<!-- Flatpickr related files --><linkhref="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script><!-- Vue.js --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@3.3"></script><!-- Lastly add this package --><scriptsrc="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11"></script><script>constapp=Vue.createApp({})app.component('flat-pickr',VueFlatpickr.default);app.mount("#app");</script>
- Clone this repo
- Make sure you have node-js
>=20.11andpnpm>=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 usingJestandvue-test-utils for testing.
- Tests can be found in
__test__folder. - Execute tests with this command
npm test
Please seeCHANGELOG for more information what has changed recently.
MIT License
About
Vue.js component for Flatpickr datetime picker 📆
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Contributors14
Uh oh!
There was an error while loading.Please reload this page.