{"id":17700844,"url":"https://github.com/wrathchaos/react-native-time-date-picker","last_synced_at":"2025-04-28T16:04:10.373Z","repository":{"id":59617650,"uuid":"537791499","full_name":"WrathChaos/react-native-time-date-picker","owner":"WrathChaos","description":"🚀 Easy to use time and date picker with lots of options for React Native 🥳","archived":false,"fork":false,"pushed_at":"2023-07-10T19:55:42.000Z","size":5425,"stargazers_count":35,"open_issues_count":6,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-28T16:03:46.886Z","etag":null,"topics":["android","calendar","date","date-picker","ios","javascript","mobile","picker","react-native","reactjs","time","time-date-picker","time-picker","typescript"],"latest_commit_sha":null,"homepage":"https://freakycoder.com","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/WrathChaos.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":"2022-09-17T11:46:00.000Z","updated_at":"2025-02-25T18:42:34.000Z","dependencies_parsed_at":"2024-06-19T13:23:01.991Z","dependency_job_id":"ee0aae48-6e46-4c3d-a424-8656acf2f013","html_url":"https://github.com/WrathChaos/react-native-time-date-picker","commit_stats":{"total_commits":71,"total_committers":2,"mean_commits":35.5,"dds":0.05633802816901412,"last_synced_commit":"3621f86f4afac8fe63bf597a524b077af2d26a07"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":"WrathChaos/react-native-typescript-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-time-date-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-time-date-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-time-date-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-time-date-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-time-date-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251342722,"owners_count":21574244,"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":["android","calendar","date","date-picker","ios","javascript","mobile","picker","react-native","reactjs","time","time-date-picker","time-picker","typescript"],"created_at":"2024-10-24T17:43:27.409Z","updated_at":"2025-04-28T16:04:10.223Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Time Date Picker\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![React Native Time Date Picker](https://img.shields.io/badge/-Easy%20to%20use%20time%20and%20date%20picker%20with%20lots%20of%20options%20for%20React%20Native.-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-time-date-picker)\n\n[![npm version](https://img.shields.io/npm/v/react-native-time-date-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-time-date-picker)\n[![npm](https://img.shields.io/npm/dt/react-native-time-date-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-time-date-picker)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Time Date Picker\"\n        src=\"assets/Screenshots/date-picker-default.gif\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Time Date Picker\"\n        src=\"assets/Screenshots/date-picker.gif\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Time Date Picker\"\n        src=\"assets/Screenshots/time-picker.gif\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Time Date Picker\"\n        src=\"assets/Screenshots/month-picker.gif\" /\u003e\n\u003c/p\u003e\n\n# Documentation\n\n- [Getting Started](https://github.com/WrathChaos/react-native-time-date-picker#installation)\n- [Usage](https://github.com/WrathChaos/react-native-time-date-picker#usage)\n- [Configuration](https://github.com/WrathChaos/react-native-time-date-picker#configuration---props)\n- [Localization](./docs/translations.md)\n- [Localization Contribution](./docs/contributions/translations.md)\n\n#Announcement\nHuge Version 2 is under development 🌟 More to come!\n\n# Installation\n\nAdd the dependency:\n\n```bash\nnpm i react-native-time-date-picker\n```\n\n## Peer Dependencies\n\n\u003ch5\u003e\u003ci\u003eIMPORTANT! You need install them\u003c/i\u003e\u003c/h5\u003e\n\n```json\n\"moment\": \"\u003e= 2.29.4\",\n\"@freakycoder/react-native-bounceable\": \"\u003e= 1.0.3\"\n```\n\n# Usage\n\n## Import\n\n```jsx\nimport { TimeDatePicker, Modes } from \"react-native-time-date-picker\";\n```\n\n## Fundamental Usage\n\n```jsx\nconst now = moment().valueOf();\n\n\u003cTimeDatePicker\n  selectedDate={now}\n  mode={Modes.date}\n  onMonthYearChange={(month: number) =\u003e {\n    console.log(\"month: \", month); // 1643366100000\n    console.log(\"month formatted: \", moment(month).format(\"MM\")); // 04\n    console.log(\"month formatted: \", moment(month).format(\"MMM\")); // Apr\n    console.log(\"month formatted: \", moment(month).format(\"MMMM\")); // April\n  }}\n  onSelectedChange={(selected: number) =\u003e {\n    console.log(\"selected Date: \", selected); // 1649846100000\n    console.log(\n      \"selected date formatted: \",\n      moment(selected).format(\"YYYY/MM/DD HH:mm\"),\n    ); // 2022/04/13 13:35\n  }}\n  onTimeChange={(time: number) =\u003e {\n    console.log(\"time: \", time); // 1643331840000\n    console.log(\"time formatted: \", moment(time).format(\"HH:mm\")); // 04:04\n  }}\n/\u003e;\n```\n\n## Customization Example Usage\n\n```jsx\nconst now = moment().valueOf();\n\n\u003cTimeDatePicker\n  selectedDate={now}\n  mode={Modes.time}\n  options={{\n    daysStyle: {\n      borderRadius: 16,\n      borderWidth: 0.5,\n      borderColor: \"#f1f1f1\",\n    },\n    is24Hour: false,\n  }}\n  onMonthYearChange={(month) =\u003e {\n    console.log(\"month: \", month);\n  }}\n  onSelectedChange={(selected) =\u003e {\n    console.log(\"selected: \", selected);\n  }}\n  onTimeChange={(time) =\u003e {\n    console.log(\"time: \", time);\n  }}\n/\u003e;\n```\n\n## Example Project 😍\n\nYou can checkout the example project 🥰\n\nSimply run\n\n- `npm i`\n- `react-native run-ios/android`\n\nshould work of the example project.\n\n# Configuration - Props\n\n## Fundamentals\n\n| Property          |   Type   |  Default   | Description                                                                                          |\n| ----------------- | :------: | :--------: | ---------------------------------------------------------------------------------------------------- |\n| mode              |  Modes   | Modes.date | change the picker's main component (options: Modes.date, Modes.time, Modes.monthYear, Modes.calendar |\n| currentDate       |   Date   | new Date() | set the current date which initially visible month                                                   |\n| selectedDate      |  string  | undefined  | set the selected date which primarly value of date picker                                            |\n| onSelectedChange  | function |  default   | set your own logic when the date is selected                                                         |\n| onTimeChange      | function |  default   | set your own logic when the time is changed                                                          |\n| onMonthYearChange | function |  default   | set your own logic when the month year is selected                                                   |\n\n## Customization (Optionals)\n\n| Property               |   Type    | Default | Description                                                      |\n| ---------------------- | :-------: | :-----: | ---------------------------------------------------------------- |\n| style                  | ViewStyle | default | set or override the style object for the main container          |\n| minimumDate            |  string   | default | set the minimum selectable day from user                         |\n| maximumDate            |  string   | default | set the maximum selectable day from user                         |\n| selectorStartingYear   |  number   |    0    | change the minimum selectable year for year picker               |\n| selectorEndingYear     |  number   |    0    | change the maximum selectable year for year picker               |\n| disableDateChange      |  boolean  |  false  | disable the month \u0026 year from being changed                      |\n| onToggleTime           | function  | default | set your own logic when the header time is toggled               |\n| onToggleMonth          | function  | default | set your own logic when the header month is toggled              |\n| onTimeCancelPress      | function  | default | set your own logic when the time select cancel button is pressed |\n| disableTimeCloseButton |  boolean  |  false  | disable the time close button if you do not need it              |\n\n## Customization for Options Prop\n\n```js\nconst defaultOptions: IOptions = {\n  backgroundColor: \"#fff\",\n  textHeaderColor: \"#241523\",\n  textDefaultColor: \"#432d50\",\n  selectedTextColor: \"#fff\",\n  mainColor: \"#aa7ff9\",\n  textSecondaryColor: \"#967aa5\",\n  borderColor: \"rgba(53, 33, 52, 0.1)\",\n  defaultFont: \"System\",\n  headerFont: \"System\",\n  textFontSize: 15,\n  textHeaderFontSize: 17,\n  headerAnimationDistance: 100,\n  daysAnimationDistance: 200,\n  daysStyle: {},\n  is24Hour: true,\n};\n```\n\n## Credits\n\nHeavily inspired by [react-native-modern-datepicker](https://github.com/HosseinShabani/react-native-modern-datepicker)\n\nRe-written whole structure with Typescript and enhanced with lots of ways with better coding, types and localization\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n- [x] ~~Better integration with date timestamp (number) based~~\n- [ ] Better Documentation\n- [ ] Website\n- [ ] Write an article about the lib on Medium\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Time Date Picker is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-time-date-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-time-date-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-time-date-picker/lists"}