{"id":15512761,"url":"https://github.com/adrienpoly/rails_stimulus_flatpickr","last_synced_at":"2025-04-30T10:12:21.330Z","repository":{"id":50939838,"uuid":"141352748","full_name":"adrienpoly/rails_stimulus_flatpickr","owner":"adrienpoly","description":"Advanced datepicking example app with Stimulus + Flatpickr + Turbolinks","archived":false,"fork":false,"pushed_at":"2021-05-27T08:41:08.000Z","size":14812,"stargazers_count":63,"open_issues_count":15,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T10:12:11.384Z","etag":null,"topics":["demo-app","flatpickr","rails","stimulus","stimulus-controller","stimulusjs"],"latest_commit_sha":null,"homepage":"https://rails-stimulus-flatpickr.herokuapp.com/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-17T22:42:03.000Z","updated_at":"2024-10-31T00:02:54.000Z","dependencies_parsed_at":"2022-08-25T14:00:17.363Z","dependency_job_id":null,"html_url":"https://github.com/adrienpoly/rails_stimulus_flatpickr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Frails_stimulus_flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Frails_stimulus_flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Frails_stimulus_flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2Frails_stimulus_flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrienpoly","download_url":"https://codeload.github.com/adrienpoly/rails_stimulus_flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251683355,"owners_count":21626953,"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":["demo-app","flatpickr","rails","stimulus","stimulus-controller","stimulusjs"],"created_at":"2024-10-02T09:53:50.360Z","updated_at":"2025-04-30T10:12:21.306Z","avatar_url":"https://github.com/adrienpoly.png","language":"Ruby","funding_links":[],"categories":["Ruby"],"sub_categories":[],"readme":"# Rails Showcase of Stimulus-Flatpickr wrapper\n\nThis project is in support of the article I published on dev.to\nhttps://dev.to/adrienpoly/introducing-stimulus-flatpickr-wrapper--5c23\n\nThis example shows how to use [stimulus-flatpickr](https://github.com/adrienpoly/stimulus-flatpickr) wrapper in a Rails app to have an advanced date picking solution with:\n\n* localization of the datepicker 🌍\n* localization of the date formats 🌍\n* availabilities in the date picker 📅\n* Fully boosted with Turbolinks 🚀\n\n![rails stimulus flatpickr demo](./app/assets/images/rails-stimulus-flatpickr-demo.gif)\n\n## What does it takes to make this app\n\nThe date picker field\n\n```erb\n\u003c%= form_with model: appointment do |f| %\u003e\n  \u003c%= f.text_field :start_at,\n      placeholder: t(\".select\"),\n      data: {\n        controller: \"flatpickr\",\n        flatpickr_alt_format: t(\"date.formats.long\"),\n        flatpickr_alt_input: true,\n        flatpickr_default_date: appointment.start_at,\n        flatpickr_locale: locale,\n        flatpickr_show_months: 2,\n        flatpickr_min_date: Time.zone.now,\n        flatpickr_max_date: Time.zone.now + 60.days,\n        flatpickr_disable: Appointment.up_comings(60).pluck(:start_at) - [appointment.start_at],\n      } %\u003e\n\u003c% end %\u003e\n```\n\nand the stimulus controller\n\n```javascript\nimport Flatpickr from \"stimulus-flatpickr\";\nimport Rails from \"rails-ujs\";\n\n// import a theme (could be in your main CSS entry too...)\nimport \"flatpickr/dist/themes/dark.css\";\n\n// import the translation files and create a translation mapping\nimport { French } from \"flatpickr/dist/l10n/fr.js\";\nimport { english } from \"flatpickr/dist/l10n/default.js\";\n\n// create a new Stimulus controller by extending stimulus-flatpickr wrapper controller\nexport default class extends Flatpickr {\n  locales = {\n    fr: French,\n    en: english\n  };\n\n  connect() {\n    //define locale and global flatpickr settings for all datepickers\n    this.config = {\n      locale: this.locale,\n      altInput: true,\n      showMonths: 2\n    };\n\n    super.connect();\n  }\n\n  // automatically submit form when a date is selected\n  change(selectedDates, dateStr, instance) {\n    const form = this.element.closest(\"form\");\n    Rails.fire(form, \"submit\");\n  }\n\n  get locale() {\n    if (this.locales \u0026\u0026 this.data.has(\"locale\")) {\n      return this.locales[this.data.get(\"locale\")];\n    } else {\n      return \"\";\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrienpoly%2Frails_stimulus_flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrienpoly%2Frails_stimulus_flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrienpoly%2Frails_stimulus_flatpickr/lists"}