{"id":13515682,"url":"https://github.com/adrienpoly/stimulus-flatpickr","last_synced_at":"2025-10-08T07:08:21.127Z","repository":{"id":32334087,"uuid":"132279445","full_name":"adrienpoly/stimulus-flatpickr","owner":"adrienpoly","description":" A modest, yet powerful wrapper of Flatpickr 📆 for Stimulus","archived":false,"fork":false,"pushed_at":"2023-10-01T20:41:07.000Z","size":2150,"stargazers_count":421,"open_issues_count":28,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-09T13:42:56.459Z","etag":null,"topics":["flatpickr","rails","stimulus","stimulus-controller","stimulusjs","wrapper-library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/adrienpoly.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-05T19:46:57.000Z","updated_at":"2025-05-27T18:46:39.000Z","dependencies_parsed_at":"2024-01-07T18:22:57.744Z","dependency_job_id":null,"html_url":"https://github.com/adrienpoly/stimulus-flatpickr","commit_stats":{"total_commits":178,"total_committers":11,"mean_commits":"16.181818181818183","dds":0.2134831460674157,"last_synced_commit":"a5744aba2e1f34c5d6ad978467850b0ac567cba4"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/adrienpoly/stimulus-flatpickr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Fstimulus-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Fstimulus-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Fstimulus-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Fstimulus-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrienpoly","download_url":"https://codeload.github.com/adrienpoly/stimulus-flatpickr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Fstimulus-flatpickr/sbom","scorecard":{"id":168134,"data":{"date":"2025-08-11","repo":{"name":"github.com/adrienpoly/stimulus-flatpickr","commit":"cf9c7e7f08043999c2a7ca62001a3f61be075ca2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"name":"Code-Review","score":3,"reason":"Found 4/12 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"97 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c","Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-v4rh-8p82-6h5w","Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T15:31:05.957Z","repository_id":32334087,"created_at":"2025-08-16T15:31:05.958Z","updated_at":"2025-08-16T15:31:05.958Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278903284,"owners_count":26065846,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["flatpickr","rails","stimulus","stimulus-controller","stimulusjs","wrapper-library"],"created_at":"2024-08-01T05:01:14.753Z","updated_at":"2025-10-08T07:08:21.084Z","avatar_url":"https://github.com/adrienpoly.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e📆 Stimulus-Flatpickr Wrapper\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/stimulus-flatpickr\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/stimulus-flatpickr.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/adrienpoly/stimulus-flatpickr\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/adrienpoly/stimulus-flatpickr/tree/master.svg?style=svg\" alt=\"CircleCi build status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/adrienpoly/stimulus-flatpickr\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/adrienpoly/stimulus-flatpickr/branch/master/graph/badge.svg\" alt=\"Coverage\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eModest yet powerful wrapper of Flatpickr for Stimulus\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003eOnly ~1kb \u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n- **Simple**: create advanced datepickers with less code\n- **Backend Friendly**: easily pass backend information to the datepicker (locals, availabilities, date formats etc)\n- **strftime friendly**: [converts automatically strftime](#date-and-time-formats) formats to flatpickr formating tokens\n- **Disable days of week**: easily disable days of week (ie: all sundays)\n- **Turbolinks**: make all your datepickers compatible with Turbolinks by design\n- **Getters**: all Flatpickr elements are available as [targets](#elements)\n- **Events/hooks**: all flatpickr [events/hooks](#callbacks) are directly available in your Stimulus Controller.\n- **Example**: [detailed example](#example) for adavanced usage of flatpickr\n- **MIT Licensed**: free for personal and commercial use\n\n## A modest wrapper of Flatpickr for Stimulus\n\nBy using this wrapper of [Flatpickr](http://flatpickr.js.org/) for [Stimulus](https://stimulusjs.org/) you can make all configurations for the Datepicker directly with the `data-attributes` of the HTML. This makes it very handy to create datepicker with server generate html and pass information from the backend to the datepicker.\n\nHere is a simple example:\n\n```erb\n\u003c%= form_with model: Appointement.new, authenticity_token: true do |f| %\u003e\n  \u003c%= f.text_field :start_time,\n    data: {\n      controller: \"flatpickr\",\n      flatpickr_min_date: Time.zone.now #disables past dates\n    } %\u003e\n\u003c% end %\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  👇👇👇👇👇👇\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/datetime-picker.png\" alt=\"datetime picker result\"\u003e\n\u003c/p\u003e\n\n## Example\n\nAn example of a Rails app showcasing\n\n- localization of the datepicker 🌍\n- localization of the date formats 🌍\n- availabilities in the date picker 📅\n- Fully boosted with Turbolinks 🚀\n\nis available here : [Rails Stimulus Flatpickr](https://github.com/adrienpoly/rails_stimulus_flatpickr)\n\n## Install\n\nThis assumes that you have [Stimulus](https://stimulusjs.org/handbook/installing) already installed. For Rails(5.1+) app please refer this doc (https://github.com/rails/webpacker/blob/master/docs/integrations.md#stimulus) to get started with Stimulus.\n\nIn your project just add the `flatpickr` and `stimulus-flatpickr` package.\n\n```bash\nyarn add flatpickr\nyarn add stimulus-flatpickr\n```\nor\n\n```bash\nnpm i flatpickr\nnpm i stimulus-flatpickr\n```\nNote: Do not use both `yarn` and `npm` to install packages, this might lead to an error: `...It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files`\n\n### Using importmap\n\n```bash\n./bin/importmap pin flatpickr stimulus-flatpickr@beta\n```\n\n## Basic usage\n\nIf you only need to convert an input field in a DateTime picker, you just need to register a standard Stimulus controller and add some markup to your input field.\n\n### Register a Flatpickr Controller\n\nmanually register a new Stimulus controller in your main JS entry point.\n\n```js\n// ./packs/application.js\nimport { Application } from 'stimulus'\nimport { definitionsFromContext } from 'stimulus/webpack-helpers'\n\nconst application = Application.start()\nconst context = require.context('../controllers', true, /\\.js$/)\napplication.load(definitionsFromContext(context))\n\n// import Flatpickr\nimport Flatpickr from 'stimulus-flatpickr'\n\n// Import style for flatpickr\nrequire(\"flatpickr/dist/flatpickr.css\")\n\n// Manually register Flatpickr as a stimulus controller\napplication.register('flatpickr', Flatpickr)\n```\nNote:\n* **Setup**: By Manually registering Flatpickr controller, you don't need to create a `flatpickr_controller.js` file. However, To add custom behavior you will have to create the `flatpickr_controller.js` file. Read more details about it below.\n* **Style**: You can always choose different theme for calender by requiring different `.css` file. You can find them inside your app's root directory `node_modules/flatpickr/dist/themes`\n* **Deployment**: In Production environment, include `\u003c%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %\u003e` in your `application.html.erb` file in order to load the calendar style.\n\n\n### Using it with Rails\n\nYou can now create forms and input fields easily by adding a `data-controller=\"flatpickr\"` attribute to the input fields and pass [options](https://flatpickr.js.org/options/) with the Stimulus Controller states : `data-flatpickr-the-option`.\n\n```erb\n\u003c%= form_with model: Appointement.new, authenticity_token: true do |f| %\u003e\n  \u003c%= f.text_field :start_time,\n    data: {\n      controller: \"flatpickr\",\n      flatpickr_date_format: \"Y-m-d\",\n      flatpickr_min_date: Time.zone.now\n    } %\u003e\n\u003c% end %\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  👇👇👇👇👇👇\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/datetime-picker.png\" alt=\"datetime picker result\"\u003e\n\u003c/p\u003e\n\n### Options \u0026 conventions\n\nAll options for Flatpickr can be found [here](https://flatpickr.js.org/options/).\n\nAll options are in `camelCase` (JS) and must be converted to `lower_snake_case` in the `data-attribute`. `lower_snake_case` is automatically converted to `kebab-case` when rails render the HTML.\n\n```erb\n\u003c%= f.text_field :start_time,\n  data: {\n    controller: \"flatpickr\",\n    flatpickr_enable_time: true\n  }\n} %\u003e\n```\n\nwill output this HTML:\n\n```html\n\u003cinput data-controller=\"flatpickr\" data-flatpickr-enable-time=\"true\" type=\"text\" name=\"appointement[start_time]\" /\u003e\n```\n\n### HTML markup\n\nIf you are not using Rails or simply wants to markup your HTML directly, simply add a `html data-controller=\"flatpickr\"` to your input field and some options `html data-flatpickr-some-option=\"value\"` options must be converted from `camelCase` to `kebab-case`\n\n## Advanced Usage\n\nIf you need more than just displaying the standard DateTime picker, then you can extend the `stimulus-flatpickr` wrapper controller. This is necessary when you need to:\n\n- set a custom language\n- create custom callbacks\n- perform JS business logic\n\n**Skip basics installation steps from above!**\n\n### Extends the controller\n\ncreate a new Stimulus controller that will inherit from `stimulus-flatpickr`\n\n```js\n// ./controllers/flatpickr_controller.js\n// import stimulus-flatpickr wrapper controller to extend it\nimport Flatpickr from 'stimulus-flatpickr'\n\n// you can also import a translation file\nimport { French } from 'flatpickr/dist/l10n/fr.js'\n\n// import a theme (could be in your main CSS entry too...)\nimport 'flatpickr/dist/themes/dark.css'\n\n// create a new Stimulus controller by extending stimulus-flatpickr wrapper controller\nexport default class extends Flatpickr {\n  initialize() {\n    // sets your language (you can also set some global setting for all time pickers)\n    this.config = {\n      locale: French\n    }\n  }\n\n  // all flatpickr hooks are available as callbacks in your Stimulus controller\n  change(selectedDates, dateStr, instance) {\n    console.log('the callback returns the selected dates', selectedDates)\n    console.log('but returns it also as a string', dateStr)\n    console.log('and the flatpickr instance', instance)\n  }\n}\n```\n\n### Global settings for all datepickers\n\nAs we have seen just above you can easily from your rails `erb` code pass the flatpickr options. This is great for passing dynamic options that might change (ie enableDate, dateFormat etc).\n\nIf all your datepickers share some global settings you can define them in your `initialize()` or `connect()` function.\n\n```js\ninitialize() {\n   //global options\n    this.config = {\n      enableTime: true,\n      time_24hr: true\n    };\n  }\n```\n\nor with `connect()`\n\n```js\nconnect() {\n   //global options\n    this.config = {\n      ...this.config, //spread options in case some where defined in initialize\n      enableTime: true,\n      time_24hr: true\n    };\n\n    //always call super.connect()\n    super.connect();\n  }\n```\n\n### HTML markup\n\nThen in the same way as above you can now create forms and input fields easily by adding a `data-controller=\"flatpickr\"` attribute to the input fields and pass [options](https://flatpickr.js.org/options/) with the Stimulus Controller states : `data-flatpick-the-option`.\n\n```erb\n\u003c%= form_with model: Appointement.new, authenticity_token: true do |f| %\u003e\n  \u003c%= f.text_field :start_time,\n                    data: {\n                      controller: \"flatpickr\",\n                      flatpickr_date_format: \"Y-m-d\",\n                      flatpickr_min_date: Time.zone.now }\n  %\u003e\n  \u003c% end %\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  👇👇👇👇👇👇\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/datetime-picker-black-fr.png\" alt=\"datetime picker result\"\u003e\n\u003c/p\u003e\n\n### Date and Time formats\n\nFlatpickr has custom [formatting tokens](https://flatpickr.js.org/formatting/). in Rails (and other backends) formats are based on `strftime` standard.\n\nThis package automatically converts `strftime` datetime formats to the nearest Flatpickr format.\n\nWith this solution, it becomes handy to localize your date formats. `t(\"date.formats.long\")` outputs `\"%B %d, %Y\"`for the local `:en` and it outputs `\"%e %B %Y\"` for the locale `:fr`.\n\n```erb\n\u003c%= form_with model: appointment do |f| %\u003e\n  \u003c%= f.text_field :start_at,\n      data: {\n        controller: \"flatpickr\",\n        flatpickr_alt_format: t(\"date.formats.long\"),\n        flatpickr_alt_input: true,\n        flatpickr_min_date: Time.zone.now,\n      } %\u003e\n\u003c% end %\u003e\n```\n\n\u003cp align=\"center\"\u003e\n  👇👇👇👇👇👇\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/datetime-picker-formats.png\" alt=\"datetime picker result\"\u003e\n\u003c/p\u003e\n\n### Enable/Disable days of week\n\nWith Flatpickr to disable certain days of the week, you need to use the disable js function. Obviously passing a function through data-attributes is not easy 😄.\n\nThe wrapper introduce two new configuration options:\n\n- `disableDaysOfWeek`: pass an array of days to disable (all others are enabled)\n- `enableDaysOfWeek`: pass an array of days to enable (all others are disabled)\n\n\u003ctable\u003e\n\u003cth\u003e\nCode\n\u003c/th\u003e\n\u003cth\u003e\nResult\n\u003c/th\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n   \u003cpre lang=\"erb\"\u003e\n   \u003c%= form_with model: Appointement.new, authenticity_token: true do |f| %\u003e\n     \u003c%= f.text_field :start_time,\n       data: {\n         controller: \"flatpickr\",\n         flatpickr_disable_days_of_week: [5,6], #disables saturdays and sundays\n         flatpickr_disable: [\"2018-09-25\", \"2018-09-26\"] #disables individual dates\n       } %\u003e\n   \u003c% end %\u003e\n   \u003c/pre\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"./images/datetime-days-of-week.png\" alt=\"datetime picker result days of week\"\u003e\n  \u003c/p\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### Callbacks\n\nAll Flatpickr [events/hooks](https://flatpickr.js.org/events/) are available as callbacks in the extended controller as demonstrated above for the `onChange` hook.\n\nJust add the function to your Stimulus Controller in `camelCase` without `on`.\n\n`onChange` -\u003e `change(){}`\n\n### Instance and its methods\n\nYou can access the flatpickr instance from your Stimulus controller by calling `this.fp`. Also, the instance methods are available through this instance call.\n\n```javascript\nyourFunction () {\n  // ...\n  this.fp.clear()\n  this.fp.close()\n}\n```\n\n### Custom elements\n\nIf you want to display additional information on the calendar, you can wrap the Flatpickr controller arround custom elements. You can use the predefined target `instance` to attach the input element to the date picker.\n\nExample:\n\n```html\n\u003cdiv data-controller=\"flatpickr\"\u003e\n  \u003c!-- the flatpicker instance --\u003e\n  \u003cinput type=\"text\" placeholder=\"Select Date..\" data-flatpickr-target=\"instance\" /\u003e\n  \u003c!-- the custom element --\u003e\n  \u003cinput type=\"text\" data-flatpickr-target=\"custom\" /\u003e\n\u003c/div\u003e\n```\n\nIn the stimulus controller, add the target:\n```js\nstatic targets = ['custom']\n\nyourFunction () {\n  //...\n  this.customTarget\n}\n```\n\n### Getters\n\n#### Elements\n\nIn your controller you can access the Flapickr [elements](https://flatpickr.js.org/instance-methods-properties-elements/#elements) using some Stimulus like targets.\n\n`this.calendarContainerTarget` : Self-explanatory. This is the div.flatpickr-calendar element.\n\n`this.currentYearElementTarget`: The input holding the current year.\n\n`this.daysTarget` : The container for all the day elements.\n\n`this.daysContainerTarget` : The container for all the day elements.\n\n`this.inputTarget` : The text input element associated with flatpickr.\n\n`this.nextMonthNavTarget` : The “right arrow” element responsible for incrementing the current month.\n\n`this.monthNavTarget` : The container with the month navigation.\n\n`this.prevMonthNavTarget` : The “left arrow” element responsible for decrementing the current month.\n\n`this.selectedDateElemTarget`: the selected date element.\n\n`this.todayDateElemTarget`: today element.\n\n`this.weekdayContainerTarget`: the container we all the days of the week.\n\n## Overriding connect \u0026 disconnect\n\nif you need to override the connect function in the extended controller, you need to call `super`\n\n```js\nconnect(){\n  // ...\n  // define global settings as explained in the global settings section before super\n  // ...\n\n  // always call super.connect()\n  super.connect();\n\n  // ...\n  // Your code can access this.fp flatpickr instance\n  // ...\n}\n```\n\n## Internationalization\n\nTo handle multiple language to translate your datepicker and convert the date formats, you can have a look at the [example app](https://github.com/adrienpoly/rails_stimulus_flatpickr). `stimulus-flatpickr` makes it straight forward to handle locales.\n\n## CSS\n\nThis wrapper does not include any CSS. Flatpickr CSS should be loaded separately from the main Flatpickr package as you would normally do.\n\n## Contributing\n\nBug reports and pull requests are welcome.\n\n**To contribute:**\n\nFork the project.\n\nInstall dependencies\n\n`$ yarn install`\n\nStart the test watcher\n\n`$ yarn test:watch`\n\nRunning one-off test runs can be done with:\n\n`$ yarn test`\n\nYou can test locally also the results with the playground project [./playground](./playground)\n\n`$ yarn start:playground`\n\n**Then :**\n\n👍 Write some tests\n\n💪 Add your feature\n\n🚀 Send a PR\n\n## License\n\nThis package is available as open source under the terms of the MIT License.\n","funding_links":[],"categories":["JavaScript","Packages"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrienpoly%2Fstimulus-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrienpoly%2Fstimulus-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrienpoly%2Fstimulus-flatpickr/lists"}