{"id":18918960,"url":"https://github.com/werein/react-native-dates","last_synced_at":"2025-04-06T02:08:54.066Z","repository":{"id":12284251,"uuid":"71444241","full_name":"werein/react-native-dates","owner":"werein","description":"React Native date / daterange picker and calendar","archived":false,"fork":false,"pushed_at":"2023-01-04T01:17:13.000Z","size":1473,"stargazers_count":165,"open_issues_count":28,"forks_count":53,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T19:03:07.301Z","etag":null,"topics":["calendar","datepicker","daterange","daterangepicker","datetime-picker","react","react-native","react-native-dates"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/werein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-20T08:59:46.000Z","updated_at":"2024-02-16T17:20:37.000Z","dependencies_parsed_at":"2023-01-14T09:00:11.514Z","dependency_job_id":null,"html_url":"https://github.com/werein/react-native-dates","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/werein%2Freact-native-dates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Freact-native-dates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Freact-native-dates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Freact-native-dates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/werein","download_url":"https://codeload.github.com/werein/react-native-dates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423515,"owners_count":20936626,"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":["calendar","datepicker","daterange","daterangepicker","datetime-picker","react","react-native","react-native-dates"],"created_at":"2024-11-08T10:34:26.111Z","updated_at":"2025-04-06T02:08:54.049Z","avatar_url":"https://github.com/werein.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Dates\n[![Build Status](https://travis-ci.org/werein/react-native-dates.svg)](https://travis-ci.org/werein/react-native-dates)[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/werein/react-native-dates?branch=master\u0026svg=true)](https://ci.appveyor.com/project/jirikolarik/react-native-dates) [![Code Climate](https://codeclimate.com/github/werein/react-native-dates/badges/gpa.svg)](https://codeclimate.com/github/werein/react-native-dates) [![Issue Count](https://codeclimate.com/github/werein/react-native-dates/badges/issue_count.svg)](https://codeclimate.com/github/werein/react-native-dates)\n\n__React Native Date and date range picker / calendar for iOS and Android__\n\n## API\n\n```javascript\ntype DatesType = {\n  range: boolean,\n  date: ?moment,\n  startDate: ?moment,\n  endDate: ?moment,\n  focusedInput: 'startDate' | 'endDate',\n  onDatesChange: (date: { date?: ?moment, startDate?: ?moment, endDate?: ?moment }) =\u003e void,\n  isDateBlocked: (date: moment) =\u003e boolean\n  weekHeader?: {\n    dayFormat?: string\n  },\n  header?: {\n    renderLeftLabel?: Function,\n    renderCenterLabel?: moment =\u003e void,\n    renderRightLabel?: Function,\n  },\n  hideDifferentMonthDays: boolean\n}\n```\n\n## Demo\n\n\u003cimg src=\"http://i.giphy.com/YUqyKQoeNs2v6.gif\"\u003e\n\u003cimg src=\"http://i.giphy.com/130cHgOE0K5TCU.gif\"\u003e\n\n\n## Example\n\nIn this example we disabled dates back in history and we shows selected dates bellow\n\n```javascript\n/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n * @flow\n */\n\nimport React, { Component } from 'react';\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View\n} from 'react-native';\nimport Dates from 'react-native-dates';\nimport moment from 'moment';\n\nexport default class ReactNativeDatesDemo extends Component {\n  state = {\n    date: null,\n    focus: 'startDate',\n    startDate: null,\n    endDate: null\n  }\n\n\n  render() {\n    const isDateBlocked = (date) =\u003e\n      date.isBefore(moment(), 'day');\n\n    const onDatesChange = ({ startDate, endDate, focusedInput }) =\u003e\n      this.setState({ ...this.state, focus: focusedInput }, () =\u003e\n        this.setState({ ...this.state, startDate, endDate })\n      );\n\n    const onDateChange = ({ date }) =\u003e\n      this.setState({ ...this.state, date });\n\n\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cDates\n          onDatesChange={onDatesChange}\n          isDateBlocked={isDateBlocked}\n          startDate={this.state.startDate}\n          endDate={this.state.endDate}\n          focusedInput={this.state.focus}\n          focusedMonth={ moment('05/09/2030','DD/MM/YYYY')}\n          range\n        /\u003e\n\n        \u003cDates\n          date={this.state.date}\n          onDatesChange={onDateChange}\n          isDateBlocked={isDateBlocked}\n        /\u003e\n\n      {this.state.date \u0026\u0026 \u003cText style={styles.date}\u003e{this.state.date \u0026\u0026 this.state.date.format('LL')}\u003c/Text\u003e}\n      \u003cText style={[styles.date, this.state.focus === 'startDate' \u0026\u0026 styles.focused]}\u003e{this.state.startDate \u0026\u0026 this.state.startDate.format('LL')}\u003c/Text\u003e\n      \u003cText style={[styles.date, this.state.focus === 'endDate' \u0026\u0026 styles.focused]}\u003e{this.state.endDate \u0026\u0026 this.state.endDate.format('LL')}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    flexGrow: 1,\n    marginTop: 20\n  },\n  date: {\n    marginTop: 50\n  },\n  focused: {\n    color: 'blue'\n  }\n});\n\nAppRegistry.registerComponent('ReactNativeDatesDemo', () =\u003e ReactNativeDatesDemo);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerein%2Freact-native-dates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwerein%2Freact-native-dates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerein%2Freact-native-dates/lists"}