{"_id":"@arhakim/react-native-daterange-picker","name":"@arhakim/react-native-daterange-picker","dist-tags":{"latest":"1.5.9"},"versions":{"1.5.9":{"name":"@arhakim/react-native-daterange-picker","version":"1.5.9","description":"Custom for my personal project: Date range and single date picker for React Native (Supports iOS and Android) Forked from react-native-daterange-picker","main":"src/index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/aerhakim/react-native-daterange-picker.git"},"keywords":["react-native","datepicker","daterange","daterange-picker"],"author":{"name":"Naxulanth"},"license":"MIT","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/aerhakim/react-native-daterange-picker/issues"},"homepage":"https://github.com/aerhakim/react-native-daterange-picker/","dependencies":{"lodash":"^4.17.19","moment":"^2.27.0"},"peerDependencies":{"react":"^16.13.1","react-native":"^0.63.2"},"devDependencies":{"@react-native-community/eslint-config":"^2.0.0","eslint":"^7.6.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.5","eslint-plugin-react-hooks":"^4.0.8","eslint-plugin-react-native":"^3.8.1","prettier":"^2.0.5"},"gitHead":"c8e5c58c4a9272303421262c793787a7584f27cf","_id":"@arhakim/react-native-daterange-picker@1.5.9","_nodeVersion":"19.4.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-zSBWRKor/p0eWosrFg8EoYleB/RUlZZ+OiCoYK/f2rKW1YPHW2nzUUff1m0kv4XIhuzumxc+YS4zIGXVCXXsNg==","shasum":"f774ff006cb1715bff6030a8f53ce0df41675985","tarball":"https://registry.npmjs.org/@arhakim/react-native-daterange-picker/-/react-native-daterange-picker-1.5.9.tgz","fileCount":11,"unpackedSize":36035,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnAkmaVvVuV7XIowPURtpZV7vAy2khB4ANkWCV+5LB0AiEAvUO+9LTbzvs99ORAndsc6edxxbSwW2VZH4QKU5ERc1w="}]},"_npmUser":{"name":"aerhakim","email":"arhakim@students.amikom.ac.id"},"directories":{},"maintainers":[{"name":"aerhakim","email":"arhakim@students.amikom.ac.id"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-daterange-picker_1.5.9_1691208059728_0.6337636470969512"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-05T04:00:59.494Z","1.5.9":"2023-08-05T04:00:59.960Z","modified":"2023-08-05T04:01:00.216Z"},"maintainers":[{"name":"aerhakim","email":"arhakim@students.amikom.ac.id"}],"description":"Custom for my personal project: Date range and single date picker for React Native (Supports iOS and Android) Forked from react-native-daterange-picker","homepage":"https://github.com/aerhakim/react-native-daterange-picker/","keywords":["react-native","datepicker","daterange","daterange-picker"],"repository":{"type":"git","url":"git+https://github.com/aerhakim/react-native-daterange-picker.git"},"author":{"name":"Naxulanth"},"bugs":{"url":"https://github.com/aerhakim/react-native-daterange-picker/issues"},"license":"MIT","readme":"# Fork From react-native-daterange-picker\n\nCustomize React Native Date Range Picker for My Personal Project\n\nA React Native component for picking date ranges or single dates.\n\n- Completely customizable\n- Uses Moment.js for handling dates\n\n<img src=\"http://www.deniz.gg/date_range_4.gif\" width=300/>\n\n## Installation\n\n`yarn add react-native-daterange-picker`\n\nor\n\n`npm install --save react-native-daterange-picker`\n\n## Usage\n\n### Date range\n\n```js\nimport React from \"react\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport moment from \"moment\";\nimport DateRangePicker from \"react-native-daterange-picker\";\n\nexport default class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      startDate: null,\n      endDate: null,\n      displayedDate: moment(),\n    };\n  }\n\n  setDates = (dates) => {\n    this.setState({\n      ...dates,\n    });\n  };\n\n  render() {\n    const { startDate, endDate, displayedDate } = this.state;\n    return (\n      <View style={styles.container}>\n        <DateRangePicker\n          onChange={this.setDates}\n          endDate={endDate}\n          startDate={startDate}\n          displayedDate={displayedDate}\n          range\n        >\n          <Text>Click me!</Text>\n        </DateRangePicker>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n```\n\n### Single date\n\n<img src=\"http://www.deniz.gg/single_date_3.gif\" width=300/>\n\nUse the `date` prop instead of the `startDate` and `endDate` props.\n\n```js\nimport React from \"react\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport moment from \"moment\";\nimport DateRangePicker from \"react-native-daterange-picker\";\n\nexport default class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      date: null,\n      displayedDate: moment(),\n    };\n  }\n\n  setDates = (dates) => {\n    this.setState({\n      ...dates,\n    });\n  };\n\n  render() {\n    const { date, displayedDate } = this.state;\n    return (\n      <View style={styles.container}>\n        <DateRangePicker\n          onChange={this.setDates}\n          date={date}\n          displayedDate={displayedDate}\n        >\n          <Text>Click me!</Text>\n        </DateRangePicker>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n```\n\n### Minimum and maximum allowed dates\n\n<img src=\"http://www.deniz.gg/disabled_dates_2.gif\" width=300/>\n\nUse the `minDate` and `maxDate` props to disable the dates that aren't allowed.\n\n```js\nimport React from \"react\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport moment from \"moment\";\nimport DateRangePicker from \"react-native-daterange-picker\";\n\nexport default class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      startDate: null,\n      endDate: null,\n      displayedDate: moment(),\n      minDate: moment().set(\"date\", 17),\n      maxDate: moment().set(\"date\", 20),\n    };\n  }\n\n  setDates = (dates) => {\n    this.setState({\n      ...dates,\n    });\n  };\n\n  render() {\n    const { startDate, endDate, displayedDate, minDate, maxDate } = this.state;\n    return (\n      <View style={styles.container}>\n        <DateRangePicker\n          onChange={this.setDates}\n          startDate={startDate}\n          endDate={endDate}\n          minDate={minDate}\n          maxDate={maxDate}\n          range\n          displayedDate={displayedDate}\n        >\n          <Text>Click me!</Text>\n        </DateRangePicker>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n```\n\n### Setting locale\n\nSimply pass your custom Moment object with locale attached to it as a prop.\n\n```js\nimport React from \"react\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport DateRangePicker from \"react-native-daterange-picker\";\n\nimport moment from \"moment/min/moment-with-locales\";\nmoment.locale(\"en\");\n\nexport default class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      startDate: null,\n      endDate: null,\n      displayedDate: moment(),\n    };\n  }\n\n  setDates = (dates) => {\n    this.setState({\n      ...dates,\n    });\n  };\n\n  render() {\n    const { startDate, endDate, displayedDate } = this.state;\n    return (\n      <View style={styles.container}>\n        <DateRangePicker\n          onChange={this.setDates}\n          endDate={endDate}\n          startDate={startDate}\n          displayedDate={displayedDate}\n          range\n          moment={moment}\n        >\n          <Text>Click me!</Text>\n        </DateRangePicker>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n```\n\n## Options\n\n| Property             | type     |      required?      | defaultValue | Description                                                                                                                                                             |\n| -------------------- | -------- | :-----------------: | :----------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| open                 | boolean  |         no          |              | Prop to control calendar visibility state. Passing this prop will disable the default function for toggling visibility off/on by clicking the backdrop/click me button. |\n| onChange             | function |         yes         |              | Date change callback function.                                                                                                                                          |\n| startDate            | Moment   |  yes (if `range`)   |              | Value of the picked start date.                                                                                                                                         |\n| endDate              | Moment   |  yes (if `range`)   |              | Value of the picked end date.                                                                                                                                           |\n| date                 | Moment   | yes (if no `range`) |              | Value of the picked single date.                                                                                                                                        |\n| displayedDate        | Moment   |         yes         |              | The date (year/month) which is being displayed on the picker.                                                                                                           |\n| minDate              | Moment   |         no          |              | The minimum allowed date for the picker.                                                                                                                                |\n| maxDate              | Moment   |         no          |              | The maximum allowed date for the picker.                                                                                                                                |\n| range                | boolean  |         no          |    false     | Allows you to pick between range and single date selection.                                                                                                             |\n| presetButtons        | boolean  |         no          |    false     | Enables preset buttons (Today / This Week / This Month)                                                                                                                 |\n| dayHeaders           | boolean  |         no          |     true     | Allows you to enable/disable day headers.                                                                                                                               |\n| backdropStyle        | Object   |         no          |              | Styling for the backdrop of the picker.                                                                                                                                 |\n| containerStyle       | Object   |         no          |              | Styling for the picker container.                                                                                                                                       |\n| headerStyle          | Object   |         no          |              | Styling for header area.                                                                                                                                                |\n| headerTextStyle      | Object   |         no          |              | Styling for header text.                                                                                                                                                |\n| dayStyle             | Object   |         no          |              | Styling for a single day element.                                                                                                                                       |\n| dayTextStyle         | Object   |         no          |              | Styling for the text of a single day element.                                                                                                                           |\n| selectedStyle        | Object   |         no          |              | Styling for selected day element(s).                                                                                                                                    |\n| selectedTextStyle    | Object   |         no          |              | Styling for the text of selected day element(s).                                                                                                                        |\n| dayHeaderStyle       | Object   |         no          |              | Styling for selected day header element(s).                                                                                                                             |\n| dayHeaderTextStyle   | Object   |         no          |              | Styling for the text of day header element(s).                                                                                                                          |\n| disabledStyle        | Object   |         no          |              | Styling for disabled day element(s).                                                                                                                                    |\n| buttonStyle          | Object   |         no          |              | Styling for the preset button(s).                                                                                                                                       |\n| buttonTextStyle      | Object   |         no          |              | Styling for the text of preset button(s).                                                                                                                               |\n| buttonContainerStyle | Object   |         no          |              | Styling for the preset button container.                                                                                                                                |\n| monthPrevButton      | Node     |         no          |              | Icon for previous button.                                                                                                                                               |\n| monthNextButton      | Node     |         no          |              | Icon for next button.                                                                                                                                                   |\n| monthButtonsStyle    | Object   |         no          |              | Styling for month prev/next buttons.                                                                                                                                    |\n| moment               | Moment   |         no          |              | Custom Moment object, useful for setting custom locale.                                                                                                                 |\n\n## Questions & Suggestions\n\nFeel free to contact me at deniz@deniz.gg for your questions and suggestions.\n","readmeFilename":"README.md"}