{"id":13528376,"url":"https://github.com/ankurk91/vue-flatpickr-component","last_synced_at":"2025-04-10T04:50:13.357Z","repository":{"id":37664629,"uuid":"92823423","full_name":"ankurk91/vue-flatpickr-component","owner":"ankurk91","description":"Vue.js component for Flatpickr datetime picker  :calendar:","archived":false,"fork":false,"pushed_at":"2024-08-30T09:59:09.000Z","size":2253,"stargazers_count":967,"open_issues_count":6,"forks_count":101,"subscribers_count":16,"default_branch":"main","last_synced_at":"2024-10-29T20:25:22.972Z","etag":null,"topics":["datepicker","datepicker-component","flatpickr","timepicker","vue","vue-flatpickr"],"latest_commit_sha":null,"homepage":"https://ankurk91.github.io/vue-flatpickr-component/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankurk91.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-30T10:53:03.000Z","updated_at":"2024-10-23T12:41:55.000Z","dependencies_parsed_at":"2024-01-23T17:43:18.400Z","dependency_job_id":"8ccc141b-947a-443c-8509-1c8838d2cb1e","html_url":"https://github.com/ankurk91/vue-flatpickr-component","commit_stats":{"total_commits":310,"total_committers":14,"mean_commits":"22.142857142857142","dds":0.04516129032258065,"last_synced_commit":"50c44190d424ef6cfa1cdf8ca16228f549d0dcd1"},"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-flatpickr-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-flatpickr-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-flatpickr-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-flatpickr-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankurk91","download_url":"https://codeload.github.com/ankurk91/vue-flatpickr-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436252,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datepicker","datepicker-component","flatpickr","timepicker","vue","vue-flatpickr"],"created_at":"2024-08-01T06:02:28.894Z","updated_at":"2025-04-10T04:50:13.326Z","avatar_url":"https://github.com/ankurk91.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Components \u0026 Libraries","Libraries \u0026 Plugins","UI组件","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","Datepickers","形成","Form"],"readme":"# Vue FlatPickr Component\n\n[![downloads](https://badgen.net/npm/dt/vue-flatpickr-component)](https://npm-stat.com/charts.html?package=vue-flatpickr-component\u0026from=2018-01-01)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-flatpickr-component/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-flatpickr-component)\n[![npm-version](https://badgen.net/npm/v/vue-flatpickr-component)](https://www.npmjs.com/package/vue-flatpickr-component)\n[![github-tag](https://badgen.net/github/tag/ankurk91/vue-flatpickr-component)](https://github.com/ankurk91/vue-flatpickr-component/tags)\n[![build](https://github.com/ankurk91/vue-flatpickr-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-flatpickr-component/actions)\n[![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/main/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)\n[![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](LICENSE.txt)\n![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)\n\nVue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.\n\n## [Demo](https://ankurk91.github.io/vue-flatpickr-component/) or [JSFiddle](https://jsfiddle.net/ankurk91/63kzdwLx/)\n\n### Version matrix\n\n|Vue.js version| Package version |                                                              Branch |\n|:-------------|:---------------:|--------------------------------------------------------------------:| \n| 2.x          |       8.x       | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |\n| 3.x          |      12.x       |                                                            `main` |\n\n## Features\n\n* Reactive `v-model` value\n    - You can change flatpickr value programmatically\n* Reactive [config](https://flatpickr.js.org/options/) options\n    - You can change config options dynamically\n    - Component will watch for any changes and redraw itself\n* Can emit all possible [events](https://flatpickr.js.org/events/)\n* Compatible with [Bootstrap](http://getbootstrap.com/) or any other CSS framework\n* Supports [wrapped](https://flatpickr.js.org/examples/#flatpickr--external-elements) mode\n* Works with validation libraries\n\n## Installation\n\n```bash\nnpm install vue-flatpickr-component@^11\n```\n\n## Usage\n\n#### Minimal example\n\n```html\n\n\u003ctemplate\u003e\n    \u003cflat-pickr v-model=\"date\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n    import {ref} from 'vue';\n    import flatPickr from 'vue-flatpickr-component';\n    import 'flatpickr/dist/flatpickr.css';\n\n    const date = ref(null);\n\u003c/script\u003e\n```\n\n#### Detailed example\n\nUsing Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input-group/) and Font Awesome icons\n\n```html\n\n\u003ctemplate\u003e\n    \u003csection\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel\u003eSelect a date\u003c/label\u003e\n            \u003cdiv class=\"input-group\"\u003e\n                \u003cflat-pickr\n                    v-model=\"date\"\n                    :config=\"config\"\n                    class=\"form-control\"\n                    placeholder=\"Select date\"\n                    name=\"date\"/\u003e\n                \u003cdiv class=\"input-group-append\"\u003e\n                    \u003cbutton class=\"btn btn-default\" type=\"button\" title=\"Toggle\" data-toggle\u003e\n                        \u003ci class=\"fa fa-calendar\"/\u003e\n                        \u003cspan aria-hidden=\"true\" class=\"sr-only\"\u003eToggle\u003c/span\u003e\n                    \u003c/button\u003e\n                    \u003cbutton class=\"btn btn-default\" type=\"button\" title=\"Clear\" data-clear\u003e\n                        \u003ci class=\"fa fa-times\"/\u003e\n                        \u003cspan aria-hidden=\"true\" class=\"sr-only\"\u003eClear\u003c/span\u003e\n                    \u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cpre\u003eSelected date is - {{date}}\u003c/pre\u003e\n    \u003c/section\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n    import {ref} from 'vue';\n    import 'bootstrap/dist/css/bootstrap.css';\n    // import this component\n    import flatPickr from 'vue-flatpickr-component';\n    import 'flatpickr/dist/flatpickr.css';\n    // theme is optional\n    // try more themes at - https://flatpickr.js.org/themes/\n    import 'flatpickr/dist/themes/material_blue.css';\n    // localization is optional\n    import {Hindi} from 'flatpickr/dist/l10n/hi.js';\n\n    const date = ref('2022-10-28');\n\n    // Read more at https://flatpickr.js.org/options/\n    const config = ref({\n        wrap: true, // set wrap to true only when using 'input-group'\n        altFormat: 'M j, Y',\n        altInput: true,\n        dateFormat: 'Y-m-d',\n        locale: Hindi, // locale for this instance only          \n    });\n\u003c/script\u003e\n```\n\n## Events\n\n* The component can emit all possible events, you can listen to them in your component\n\n```html\n\n\u003cflat-pickr v-model=\"date\" @on-change=\"doSomethingOnChange\" @on-close=\"doSomethingOnClose\"/\u003e\n```\n\n* Event names has been converted to kebab-case.\n* You can still pass your callback methods in `:config` like original flatpickr do.\n\n## Available props\n\nThe component accepts these props:\n\n| Attribute |                      Type                       |                    Default                     | Description                                                            |\n|:----------|:-----------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------------------------------|\n| v-model   | String / Date Object / Array / Timestamp / null |                     `null`                     | Set or Get date-picker value (required)                                |\n| config    |                     Object                      |               `{ wrap: false }`                | Flatpickr configuration [options](https://flatpickr.js.org/options/)   |\n| events    |                      Array                      | Array of sensible [events](./src/events.ts#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |\n\n## Use in browser with CDN \n\n```html\n\u003c!-- Flatpickr related files --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Vue.js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.3\"\u003e\u003c/script\u003e\n\u003c!-- Lastly add this package --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const app = Vue.createApp({})\n    app.component('flat-pickr', VueFlatpickr.default);\n    app.mount(\"#app\");\n\u003c/script\u003e\n```\n\n## Run examples on your localhost\n\n* Clone this repo\n* Make sure you have node-js `\u003e=20.11` and [pnpm](https://pnpm.io/) `\u003e=9.x` pre-installed\n* Install dependencies `pnpm install`\n* Run webpack dev server `npm start`\n* This should open the demo page in your default web browser\n\n## Testing\n\n* This package is using [Jest](https://github.com/facebook/jest)\n  and [vue-test-utils](https://github.com/vuejs/test-utils) for testing.\n* Tests can be found in `__test__` folder.\n* Execute tests with this command `npm test`\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## License\n\n[MIT](LICENSE.txt) License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-flatpickr-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankurk91%2Fvue-flatpickr-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-flatpickr-component/lists"}