{"id":20572698,"url":"https://github.com/molnarmark/preact-flatpickr","last_synced_at":"2025-06-22T17:38:47.146Z","repository":{"id":57329463,"uuid":"145750934","full_name":"molnarmark/preact-flatpickr","owner":"molnarmark","description":"📅 Preact wrapper for the Flatpickr library.","archived":false,"fork":false,"pushed_at":"2018-08-31T09:22:26.000Z","size":14,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T20:58:03.419Z","etag":null,"topics":["date","date-picker","preact","preact-components"],"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/molnarmark.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}},"created_at":"2018-08-22T19:02:41.000Z","updated_at":"2020-04-18T09:12:27.000Z","dependencies_parsed_at":"2022-09-14T19:00:59.764Z","dependency_job_id":null,"html_url":"https://github.com/molnarmark/preact-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/molnarmark%2Fpreact-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molnarmark%2Fpreact-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molnarmark%2Fpreact-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molnarmark%2Fpreact-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/molnarmark","download_url":"https://codeload.github.com/molnarmark/preact-flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248858197,"owners_count":21173133,"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":["date","date-picker","preact","preact-components"],"created_at":"2024-11-16T05:23:10.775Z","updated_at":"2025-04-14T17:21:32.442Z","avatar_url":"https://github.com/molnarmark.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📅 Preact Flatpickr\n\n[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)\n[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n\u003e Flatpickr component for Preact ported from react-flatpickr.\n\n### Getting Started\nInstall the package by running:\n`npm install --save preact-flatpickr` or `yarn add preact-flatpickr`\n\n\n### Example\n```jsx\nimport 'flatpickr/dist/themes/material_green.css'\n\nimport { Component, h } from 'preact'\nimport Flatpickr from 'preact-flatpickr'\n\nclass App extends Component {\n  constructor() {\n    super();\n\n    this.state = {\n      date: new Date()\n    };\n  }\n\n  render(props, state) {\n    return (\n      \u003cFlatpickr\n        value={state.date}\n        onChange={date =\u003e { this.setState({date}) }} /\u003e\n    )\n  }\n}\n```\n* `flatpickr options`: you can pass all `flatpickr parameters` to `props.options`\n* All flatpickr [hooks](https://flatpickr.js.org/events/)  can be passed as a JSX prop, or to `props.options`\n\n```jsx\n\u003cFlatpickr options={{minDate: '2017-01-01'}} /\u003e\n```\n\n\n### Themes\nYou can import the style for flatpickr manually, like so: `import 'flatpickr/dist/themes/theme.css'`\nor you can use the `theme` attribute:\n```jsx\n\u003cFlatpickr\n        theme=\"material_green\"\n        value={date}\n        onChange={date =\u003e { this.setState({date}) }} /\u003e\n```\n\nLearn more about the themes [here](https://flatpickr.js.org/themes/).\n\n\n### API\nEvery [Flatpickr](https://flatpickr.js.org/) configuration option is available.\nYou can check out every option [here](https://flatpickr.js.org/options/).\n\n\n### License\n- MIT\n\n**I'm new to Preact, so don't bite my head off. 😊**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolnarmark%2Fpreact-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmolnarmark%2Fpreact-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolnarmark%2Fpreact-flatpickr/lists"}