{"id":3956,"url":"https://github.com/xgfe/react-native-datepicker","last_synced_at":"2025-05-14T04:07:07.132Z","repository":{"id":7889328,"uuid":"56768546","full_name":"xgfe/react-native-datepicker","owner":"xgfe","description":"react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS","archived":false,"fork":false,"pushed_at":"2023-05-05T12:02:07.000Z","size":31791,"stargazers_count":2126,"open_issues_count":287,"forks_count":725,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-05-13T12:53:41.734Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/xgfe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-04-21T11:34:10.000Z","updated_at":"2025-05-09T05:50:21.000Z","dependencies_parsed_at":"2024-06-18T11:10:18.574Z","dependency_job_id":"5a8b8411-5f34-4783-a307-fa6b2f48de7f","html_url":"https://github.com/xgfe/react-native-datepicker","commit_stats":{"total_commits":138,"total_committers":32,"mean_commits":4.3125,"dds":0.3405797101449275,"last_synced_commit":"2a209bd4f11a84ff4543fbde930fed60dcbc0f68"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xgfe","download_url":"https://codeload.github.com/xgfe/react-native-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069446,"owners_count":22009556,"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-01-05T20:16:56.494Z","updated_at":"2025-05-14T04:07:02.113Z","avatar_url":"https://github.com/xgfe.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Libraries","Others","React, React Native"],"sub_categories":["UI","Components"],"readme":"# react-native-datepicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads](https://img.shields.io/npm/dt/react-native-datepicker.svg)](https://img.shields.io/npm/dt/react-native-datepicker.svg)\nReact Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS\n\n## Install\n\n```bash\nnpm install react-native-datepicker --save\n```\n\nOr using [react-native-ui-xg](https://github.com/xgfe/react-native-ui-xg), our react-naitve ui kit.\n\n```bash\nnpm install react-native-ui-xg --save\n```\n\n## Example\nCheck [index.android.js](https://github.com/xgfe/react-native-datepicker/blob/master/index.android.js) in the Example.\n\n![android](http://xgfe.github.io/react-native-datepicker/img/react-native-datepicker-android.gif)\n![ios](http://xgfe.github.io/react-native-datepicker/img/react-native-datepicker-ios.gif)\n\n## Usage\n\n```javascript\n\nimport React, { Component } from 'react'\nimport DatePicker from 'react-native-datepicker'\n\nexport default class MyDatePicker extends Component {\n  constructor(props){\n    super(props)\n    this.state = {date:\"2016-05-15\"}\n  }\n\n  render(){\n    return (\n      \u003cDatePicker\n        style={{width: 200}}\n        date={this.state.date}\n        mode=\"date\"\n        placeholder=\"select date\"\n        format=\"YYYY-MM-DD\"\n        minDate=\"2016-05-01\"\n        maxDate=\"2016-06-01\"\n        confirmBtnText=\"Confirm\"\n        cancelBtnText=\"Cancel\"\n        customStyles={{\n          dateIcon: {\n            position: 'absolute',\n            left: 0,\n            top: 4,\n            marginLeft: 0\n          },\n          dateInput: {\n            marginLeft: 36\n          }\n          // ... You can check the source to find the other keys.\n        }}\n        onDateChange={(date) =\u003e {this.setState({date: date})}}\n      /\u003e\n    )\n  }\n}\n```\n\nYou can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/index.android.js) in the Example for detail.\n\n## Properties\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| style | - | `object` | Specify the style of the DatePicker, eg. width, height...  |\n| date | - | \u003ccode\u003estring \u0026#124; date \u0026#124; Moment instance\u003c/code\u003e | Specify the display date of DatePicker. `string` type value must match the specified format |\n| mode | 'date' | `enum` | The `enum` of `date`, `datetime` and `time` |\n| androidMode | 'default' | `enum` | The `enum` of `default`, `calendar` and `spinner` (only Android) |\n| format | 'YYYY-MM-DD' | `string` | Specify the display format of the date, which using [moment.js](http://momentjs.com/). The default value change according to the mode. |\n| confirmBtnText | '确定' | `string` | Specify the text of confirm btn in ios. |\n| cancelBtnText | '取消' | `string` | Specify the text of cancel btn in ios. |\n| iconSource | - | \u003ccode\u003e{uri: string} \u0026#124; number\u003c/code\u003e | Specify the icon. Same as the `source` of Image, always using `require()` |\n| minDate | - | \u003ccode\u003estring \u0026#124; date\u003c/code\u003e | Restricts the range of possible date values. |\n| maxDate | - | \u003ccode\u003estring \u0026#124; date\u003c/code\u003e | Restricts the range of possible date values. |\n| duration | 300 | `number` | Specify the animation duration of datepicker.|\n| customStyles | - | `object` | The hook of customize datepicker style, same as the native style. `dateTouchBody`, `dateInput`...|\n| showIcon | true | `boolean` | Controller whether or not show the icon |\n| hideText | false | `boolean` | Controller whether or not show the `dateText` |\n| iconComponent | - | `element` | Set the custom icon |\n| disabled | false | `boolean` | Controller whether or not disable the picker |\n| is24Hour | - | `boolean` | Set the TimePicker is24Hour flag. The default value depend on `format`. Only work in Android |\n| allowFontScaling | true | `boolean` | Set to false to disable font scaling for every text component |\n| placeholder | '' | `string` | The placeholder show when this.props.date is falsy |\n| onDateChange | - | `function` | This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by [moment.js](http://momentjs.com/) with the given format property. |\n| onOpenModal | - | `function` | This is called when the DatePicker Modal open. |\n| onCloseModal | - | `function` | This is called when the DatePicker Modal close |\n| onPressMask | - | `function` | This is called when clicking the ios modal mask |\n| modalOnResponderTerminationRequest | - | `function` | Set the callback for React Native's [Gesture Responder System](https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle)'s call to `onResponderTerminationRequest`. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases.  |\n| TouchableComponent | `TouchableHighlight` | `Component` | Replace the `TouchableHighlight` with a custom `Component`. For example : `TouchableOpacity` |\n| getDateStr | - | Function | A function to override how to format the date into a `String` for display, receives a `Date` instance\n\n### Property `customStyles` available keys\n\n* appearance: `dateInput`, `disabled`, `dateTouchBody`, `dateIcon`, `placeholderText`, `dateText`\n* ios select panel: `datePickerCon`, `datePicker`, `btnConfirm`, `btnTextConfirm`, `btnCancel`, `btnTextCancel`\n\n\n## Instance Methods\n\n| Method  | Params  | Description |\n| :------------ |:---------------:| :---------------:|\n| onPressDate | - | Manually open the date picker panel |\n| onPressCancel | - | Manually close the date picker panel like, similarly pressing cancel btn |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxgfe%2Freact-native-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxgfe%2Freact-native-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxgfe%2Freact-native-datepicker/lists"}