{"id":18870821,"url":"https://github.com/hoadv/react-native-date-picker","last_synced_at":"2026-02-15T04:30:16.560Z","repository":{"id":43020796,"uuid":"510953740","full_name":"hoadv/react-native-date-picker","owner":"hoadv","description":"React Native date picker expo component for iOS, Android and browser. Designed using ScrollView.","archived":false,"fork":false,"pushed_at":"2022-07-08T04:58:51.000Z","size":2043,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T06:02:44.106Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/hoadv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-06T01:58:52.000Z","updated_at":"2022-07-17T08:20:39.000Z","dependencies_parsed_at":"2022-09-26T17:01:11.438Z","dependency_job_id":null,"html_url":"https://github.com/hoadv/react-native-date-picker","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/hoadv%2Freact-native-date-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoadv%2Freact-native-date-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoadv%2Freact-native-date-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoadv%2Freact-native-date-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoadv","download_url":"https://codeload.github.com/hoadv/react-native-date-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239818627,"owners_count":19702178,"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":[],"created_at":"2024-11-08T05:23:10.362Z","updated_at":"2026-02-15T04:30:16.529Z","avatar_url":"https://github.com/hoadv.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/hdcoder"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/hoadv/react-native-date-picker/blob/master/assets/logo.png\" style=\"margin-bottom: -30px\" width=\"320\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/hoadv/react-native-date-picker/blob/master/assets/logo-android.png\" style=\"margin-bottom: -30px\" width=\"320\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://snack.expo.dev/@hoavd106/react-native-date-picker\"\u003e🎯 Try component at snack.expo.io\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat\u0026logo=EXPO\u0026labelColor=ffffff\u0026logoColor=000\" alt=\"npm type definitions\"/\u003e\n    \u003cimg src=\"https://img.shields.io/npm/types/@hoadv/react-native-date-picker\" alt=\"npm type definitions\"/\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/@hoadv/react-native-date-picker\" alt=\"npm bundle size\"/\u003e\n\u003c/p\u003e\n\nReact Native customizable date picker component for iOS and Android. Designed using ScrollView. Looks identical on all\ndevices. Support more month formats (January, Jan...)\n\n## 💻 Example\n\u003cimg style=\"margin-top: 10px\" src=\"https://github.com/DieTime/react-native-date-picker/raw/master/assets/example.gif\" height=\"400\" alt=\"component-gif-preview\"/\u003e\n\n## 💬 Installation\n\n1. *Add dependencies to the project*\n\n    ```bash\n    yarn add @hoadv/react-native-date-picker\n    \n    npm install @hoadv/react-native-date-picker --save\n    ```\n\n2. *Install additional dependencies*\n\n    ```bash\n    yarn add expo-linear-gradient\n    \n    npm install expo-linear-gradient --save\n    ```\n\n3. *Then, import with ...*\n\n    ```js\n    import DatePicker from '@hoadv/react-native-date-picker';\n    ```\n\n4. *If you are not using Expo*\n   \u003e You should also follow these additional [installation instructions](https://github.com/expo/expo/tree/master/packages/expo-linear-gradient#installation-in-bare-react-native-projects).\n\n## 👩‍💻 Usage\n\n- *Simple code example*\n    ```javascript\n    import React, {useState} from \"react\";\n    import {Text, View} from \"react-native\";\n    \n    import DatePicker from \"@hoadv/react-native-date-picker\";\n    \n    export default function App() {\n        const [date, setDate] = useState();\n    \n        return (\n            \u003cView\u003e\n                \u003cText\u003e{date ? date.toDateString() : \"Select date...\"}\u003c/Text\u003e\n                \u003cDatePicker\n                    value={date}\n                    onChange={(value) =\u003e setDate(value)}\n                    format=\"yyyy-MM-dd\"\n                /\u003e\n            \u003c/View\u003e\n        );\n    }\n    ```\n\n## 📚 Documentation\n\n| Prop       | Required | Type                      | Description                                                   |\n|:---------- |:--------:|:------------------------- | ------------------------------------------------------------- |\n| value      | ✅        | Date or null or undefined | Initial date for component                                    |\n| onChange   | ✅        | (value: Date) : void      | Callback on date change event                                 |\n| height     | ⛔        | number                    | Custom component height                                       |\n| width      | ⛔        | number or string          | Custom component width such as `100` or `'50%'`                   |\n| fontSize   | ⛔        | number                    | Custom digits font size                                       |\n| textColor  | ⛔        | string                    | Custom digits text color such as hex, rgb or rgba             |\n| endYear    | ⛔        | number                    | Max year in component, default is current year                |\n| startYear  | ⛔        | number                    | Min year in component, default is `endYear - 100`             |\n| markColor  | ⛔        | string                    | Custom middle mark color such as `hex`, `rgb` or `rgba`             |\n| markHeight | ⛔        | number                    | Custom height of middle mark                                  |\n| markWidth  | ⛔        | number or string          | Custom width of middle mark such as `100` or `'50%'`              |\n| fadeColor  | ⛔        | string                    | Custom color for top and bottom fade effect `only hex colors!` |\n| format     | ⛔        | string                    | Custom picker format like reshuffle of `yyyy`, `mm`, `dd`, `MM`, `M`. Example: `'yyyy-mm-dd'` or `'dd-mm-yyyy'` and other |\n\n## 📂 Project Layout\n\n- [`example`](/example) *Simple project with date picker. It is presented on gif.*\n- [`src`](/src) *Source code of date picker.*\n- [`lib`](/lib) *Shared packages.*\n    - [`commonjs`](/lib/commonjs) *Package built as common js library.*\n    - [`module`](/lib/module) *Package built as module.*\n    - [`typescript`](/lib/typescript) *Built files for static typing.*\n\n## 📃 License\n\nSource code is made available under the [MIT license](LICENSE.md). Some dependencies may be licensed differently.\n\n## ☕ Support\n\nYou can support me so that there will be more good open source projects in the future\n\u003cp align=\"center\" style=\"padding: 10px 0 20px 0\"\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/hdcoder\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"50\" width=\"220\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoadv%2Freact-native-date-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoadv%2Freact-native-date-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoadv%2Freact-native-date-picker/lists"}