Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ankurk91/vue-flatpickr-component
Vue.js component for Flatpickr datetime picker :calendar:
https://github.com/ankurk91/vue-flatpickr-component
datepicker datepicker-component flatpickr timepicker vue vue-flatpickr
Last synced: 5 days ago
JSON representation
Vue.js component for Flatpickr datetime picker :calendar:
- Host: GitHub
- URL: https://github.com/ankurk91/vue-flatpickr-component
- Owner: ankurk91
- License: mit
- Created: 2017-05-30T10:53:03.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T09:59:09.000Z (4 months ago)
- Last Synced: 2024-10-29T20:25:22.972Z (about 2 months ago)
- Topics: datepicker, datepicker-component, flatpickr, timepicker, vue, vue-flatpickr
- Language: TypeScript
- Homepage: https://ankurk91.github.io/vue-flatpickr-component/
- Size: 2.15 MB
- Stars: 967
- Watchers: 16
- Forks: 101
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Vue FlatPickr Component
[](https://npm-stat.com/charts.html?package=vue-flatpickr-component&from=2018-01-01)
[](https://www.jsdelivr.com/package/npm/vue-flatpickr-component)
[](https://www.npmjs.com/package/vue-flatpickr-component)
[](https://github.com/ankurk91/vue-flatpickr-component/tags)
[](https://github.com/ankurk91/vue-flatpickr-component/actions)
[](https://codecov.io/gh/ankurk91/vue-flatpickr-component)
[](LICENSE.txt)
Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
## [Demo](https://ankurk91.github.io/vue-flatpickr-component/) or [JSFiddle](https://jsfiddle.net/ankurk91/63kzdwLx/)
### Version matrix
|Vue.js version| Package version | Branch |
|:-------------|:---------------:|--------------------------------------------------------------------:|
| 2.x | 8.x | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
| 3.x | 11.x | `main` |
## Features
* Reactive `v-model` value
- You can change flatpickr value programmatically
* Reactive [config](https://flatpickr.js.org/options/) options
- You can change config options dynamically
- Component will watch for any changes and redraw itself
* Can emit all possible [events](https://flatpickr.js.org/events/)
* Compatible with [Bootstrap](http://getbootstrap.com/) or any other CSS framework
* Supports [wrapped](https://flatpickr.js.org/examples/#flatpickr--external-elements) mode
* Works with validation libraries
## Installation
```bash
npm install vue-flatpickr-component@^11
```
## Usage
#### Minimal example
```html
import {ref} from 'vue';
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
const date = ref(null);
```
#### Detailed example
Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input-group/) and Font Awesome icons
```html
Select a date
Toggle
Clear
Selected date is - {{date}}
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
});
```
## 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](https://flatpickr.js.org/options/) |
| events | Array | Array of sensible [events](./src/events.ts#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |
## Use in browser with CDN
```html
const app = Vue.createApp({})
app.component('flat-pickr', VueFlatpickr.default);
app.mount("#app");
```
## Run examples on your localhost
* Clone this repo
* Make sure you have node-js `>=20.11` and [pnpm](https://pnpm.io/) `>=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](https://github.com/facebook/jest)
and [vue-test-utils](https://github.com/vuejs/test-utils) for testing.
* Tests can be found in `__test__` folder.
* Execute tests with this command `npm test`
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## License
[MIT](LICENSE.txt) License