{"id":26685941,"url":"https://github.com/coderhaoxin/react-flatpickr","last_synced_at":"2025-03-26T11:01:14.251Z","repository":{"id":12280388,"uuid":"71431825","full_name":"haoxins/react-flatpickr","owner":"haoxins","description":"flatpickr for React","archived":false,"fork":false,"pushed_at":"2025-01-30T17:32:45.000Z","size":1967,"stargazers_count":609,"open_issues_count":38,"forks_count":109,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-23T08:09:45.281Z","etag":null,"topics":["flatpickr","hacktoberfest","react"],"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/haoxins.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-20T06:23:53.000Z","updated_at":"2025-03-12T12:46:19.000Z","dependencies_parsed_at":"2025-02-28T22:03:52.445Z","dependency_job_id":"b6ead29c-59d6-4d52-83b2-9620e49c6900","html_url":"https://github.com/haoxins/react-flatpickr","commit_stats":{"total_commits":135,"total_committers":35,"mean_commits":3.857142857142857,"dds":0.6148148148148148,"last_synced_commit":"9a9dca56a70a388b07185c28e69ebe6d9b63cb10"},"previous_names":["coderhaoxin/react-flatpickr"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haoxins%2Freact-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haoxins%2Freact-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haoxins%2Freact-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haoxins%2Freact-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haoxins","download_url":"https://codeload.github.com/haoxins/react-flatpickr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641426,"owners_count":20648641,"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":["flatpickr","hacktoberfest","react"],"created_at":"2025-03-26T11:01:13.687Z","updated_at":"2025-03-26T11:01:14.221Z","avatar_url":"https://github.com/haoxins.png","language":"JavaScript","readme":"[![NPM version][npm-img]][npm-url]\n[![License][license-img]][license-url]\n[![Dependency status][david-img]][david-url]\n\n# react-flatpickr\n\n[Flatpickr](https://github.com/chmln/flatpickr) for React.\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Basic props](#basic-props)\n  - [defaultValue](#defaultValue)\n  - [value](#value)\n  - [children](#children)\n  - [className](#className)\n- [Event handlers](#event-handlers)\n- [Advanced props](#advanced-props)\n- [Troubleshooting](#troubleshooting)\n\n## Installation\n\nThis package can be install with `yarn` or `npm`\n\n`npm`\n\n```bash\nnpm install --save react-flatpickr\n```\n\n`yarn`\n\n```bash\nyarn add react-flatpickr\n```\n\n## Usage\n\n```jsx\n// Keep in mind that these are the styles from flatpickr package\n// See troubleshooting section in case you have problems importing the styles\n\nimport \"flatpickr/dist/themes/material_green.css\";\n\nimport Flatpickr from \"react-flatpickr\";\nimport { Component } from \"react\";\n\nclass App extends Component {\n  constructor() {\n    super();\n\n    this.state = {\n      date: new Date()\n    };\n  }\n\n  render() {\n    const { date } = this.state;\n    return (\n      \u003cFlatpickr\n        data-enable-time\n        value={date}\n        onChange={([date]) =\u003e {\n          this.setState({ date });\n        }}\n      /\u003e\n    );\n  }\n}\n```\n\n## Basic props\n\n### defaultValue\n\n\u003e `string` | optional\n\nThis is the default value that will be passed to the inner input\n\n### value\n\n\u003e `string || array || object || number` | optional\n\nSame as below\n\n### options\n\n\u003e `Object` | optional\n\n- `Flatpickr options`: you can pass all `Flatpickr parameters` [here](https://flatpickr.js.org/options).\n- All `Flatpickr` [hooks][hooks] can be passed within this option too.\n\n_*Example*_:\n\n```jsx\n\u003cFlatpickr options={{ minDate: \"2017-01-01\" }} /\u003e\n```\n\n### children\n\n\u003e `node` | optional\n\nThis option is closely related with the [wrap option](https://flatpickr.js.org/examples/#flatpickr-external-elements) from `Flatpickr`, please refer to the former link for more information.\n\n### className\n\n\u003e `string` | optional\n\nCustom className that will be applied to the inner `input` element. In case you need to modify the rendered `input` styles this is the `prop` you should use.\n\n## Event handlers\n\nThe following `props` are provided in order to customize the `Flatpickr's functions` default behaviour. Please refer to the [Events \u0026 Hooks section](https://flatpickr.js.org/events/) from `Flatpickr` library.\n\n### onChange\n\n\u003e `function` | optional\n\n### onOpen: function\n\n\u003e `function` | optional\n\n### onClose: function\n\n\u003e `function` | optional\n\n### onMonthChange: function\n\n\u003e `function` | optional\n\n### onYearChange: function\n\n\u003e `function` | optional\n\n### onReady: function\n\n\u003e `function` | optional\n\n### onValueUpdate: function\n\n\u003e `function` | optional\n\n### onDayCreate: function\n\n\u003e `function` | optional\n\n### onDestroy: function\n\n\u003e `function` | optional\n\n## Advanced props\n\n### render prop\n\n\u003e `function` | optional\n\nUse this `prop` if you want to `render` your custom component, this is a [Render props pattern](https://reactjs.org/docs/render-props.html).\n\n_Example usage_:\n\n```jsx\n  import React from 'react';\n  import Flatpickr from 'react-flatpickr';\n\n  const CustomInput = ({ value, defaultValue, inputRef, ...props }) =\u003e {\n    return \u003cinput {...props} defaultValue={defaultValue} ref={inputRef} /\u003e;\n  };\n\n  export default function App {\n    return (\n      \u003cFlatpickr\n        render={\n          ({defaultValue, value, ...props}, ref) =\u003e {\n            return \u003cCustomInput defaultValue={defaultValue} inputRef={ref} /\u003e\n          }\n        }\n      /\u003e\n    )\n  }\n```\n\n### flatpickr instance\n\nYou can directly manipulate the [`flatpickr` instance](https://flatpickr.js.org/instance-methods-properties-elements/) using the `flatpickr` property on the component.\n\n_Example_:\n\n```js\n  import React, { useRef } from \"react\";\n  import Flatpickr from \"react-flatpickr\";\n\n  import \"flatpickr/dist/flatpickr.css\";\n\n  export default function App() {\n    const fp = useRef(null);\n\n    return (\n      \u003cdiv\u003e\n        \u003cFlatpickr ref={fp} /\u003e\n        \u003cbutton\n          type=\"button\"\n          onClick={() =\u003e {\n            if (!fp?.current?.flatpickr) return;\n            fp.current.flatpickr.clear();\n          }}\n        \u003e\n          Clear\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n```\n\n## Themes\n\nPlease import themes directly from the `flatpickr` dependency.\n\n## Troubleshooting\n\n#### Help, the Date Picker doesn't have any styling!\n\n\u003e In most cases, you should just be able to `import 'flatpickr/dist/themes/airbnb.css'`, but in some cases npm or yarn may install `flatpickr` in `node_modules/react-flatpickr/node_modules/flatpickr`. If that happens, removing your `node_modules` dir and reinstalling should put flatpickr in the root `node_modules` dir, or you can import from `react-flatpickr/node_modules/flatpickr` manually.\n\n## License\n\nMIT\n\n[npm-img]: https://img.shields.io/npm/v/react-flatpickr.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/react-flatpickr\n[travis-img]: https://img.shields.io/travis/coderhaoxin/react-flatpickr.svg?style=flat-square\n[travis-url]: https://travis-ci.org/coderhaoxin/react-flatpickr\n[codecov-img]: https://img.shields.io/codecov/c/github/coderhaoxin/react-flatpickr.svg?style=flat-square\n[codecov-url]: https://codecov.io/github/coderhaoxin/react-flatpickr?branch=master\n[license-img]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square\n[license-url]: http://opensource.org/licenses/MIT\n[david-img]: https://img.shields.io/david/coderhaoxin/react-flatpickr.svg?style=flat-square\n[david-url]: https://david-dm.org/coderhaoxin/react-flatpickr\n[hooks]: https://chmln.github.io/flatpickr/events/#hooks\n","funding_links":[],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderhaoxin%2Freact-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderhaoxin%2Freact-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderhaoxin%2Freact-flatpickr/lists"}