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: 2 months ago
JSON representation

Vue.js component for Flatpickr datetime picker :calendar:

Lists

README 

        
# Vue FlatPickr Component



[![downloads](https://badgen.net/npm/dt/vue-flatpickr-component)](https://npm-stat.com/charts.html?package=vue-flatpickr-component&from=2018-01-01)

[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-flatpickr-component/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-flatpickr-component)

[![npm-version](https://badgen.net/npm/v/vue-flatpickr-component)](https://www.npmjs.com/package/vue-flatpickr-component)

[![github-tag](https://badgen.net/github/tag/ankurk91/vue-flatpickr-component)](https://github.com/ankurk91/vue-flatpickr-component/tags)

[![build](https://github.com/ankurk91/vue-flatpickr-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-flatpickr-component/actions)

[![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/main/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)

[![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](LICENSE.txt)

![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)



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/) `>=8.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