ohtaekwon
/
new-react-native-date-picker
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Update README.md

master
Henning Hall 4 years ago
committed by GitHub
parent
b5f1de23ec
commit
c428a2ca56
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +10
    -6
      README.md

+ 10
- 6
README.md View File

@ -32,9 +32,11 @@ This is a React Native Date Picker with following main features:
## Installation ## Installation
1. `npm install react-native-date-picker --save`
2. `react-native link react-native-date-picker` (Only needed for React Native <= 0.59)
3. `(cd ios && pod install)` (If you're using CocoaPods)
1. ```npm install react-native-date-picker``` or ```yarn add react-native-date-picker```
1. `(cd ios && pod install)` (If you're using CocoaPods)
1. Rebuild the project (e.g. `react-native run-android` or `react-native run-ios`)
If you're having troubles after following these steps, there might be a <a href="/#user-content-linking">linking issue</a>
## Requirements ## Requirements
@ -67,8 +69,8 @@ export default () => {
| date | The currently selected date. | | date | The currently selected date. |
| onDateChange | Date change handler | | onDateChange | Date change handler |
| fadeToColor | Android picker is fading towards this background color. {color, 'none'} | | fadeToColor | Android picker is fading towards this background color. {color, 'none'} |
| maximumDate | Maximum selectable date. |
| minimumDate | Minimum selectable date |
| maximumDate | Maximum selectable date. <br/> Example: `new Date("2021-12-31")` |
| minimumDate | Minimum selectable date. <br/> Example: `new Date("2021-01-01")` |
| androidVariant | Choose from 2 android style variants. {'iosClone', 'nativeAndroid'} (default: 'iosClone') | | <img src="docs/datetime-mode-android.png" alt="Datepicker ios clone variant" height="120px" /><img src="docs/react-native-date-picker-android.png" alt="Datepicker android native variant"/> | | androidVariant | Choose from 2 android style variants. {'iosClone', 'nativeAndroid'} (default: 'iosClone') | | <img src="docs/datetime-mode-android.png" alt="Datepicker ios clone variant" height="120px" /><img src="docs/react-native-date-picker-android.png" alt="Datepicker android native variant"/> |
| minuteInterval | The interval at which minutes can be selected. | <img src="docs/minute-interval-ios.png" alt="Date picker minute interval IOS" height="120px" /> | <img src="docs/minute-interval-android.png" alt="Date picker minute interval Android" height="120px" /> | | minuteInterval | The interval at which minutes can be selected. | <img src="docs/minute-interval-ios.png" alt="Date picker minute interval IOS" height="120px" /> | <img src="docs/minute-interval-android.png" alt="Date picker minute interval Android" height="120px" /> |
| mode | The date picker mode. {'datetime', 'date', 'time'} | <img src="docs/datetime-mode-ios.png" alt="React native date time picker" height="120px" /><img src="docs/date-mode-ios.png" alt="React native datepicker" height="120px" /><img src="docs/time-mode-ios.png" alt="React native time picker" height="120px" /> | <img src="docs/datetime-mode-android.png" alt="react native date time picker android" height="120px" /><img src="docs/date-mode-android.png" alt="react native datepicker android" height="120px" /><img src="docs/time-mode-android.png" alt="react native time picker android" height="120px" /> | | mode | The date picker mode. {'datetime', 'date', 'time'} | <img src="docs/datetime-mode-ios.png" alt="React native date time picker" height="120px" /><img src="docs/date-mode-ios.png" alt="React native datepicker" height="120px" /><img src="docs/time-mode-ios.png" alt="React native time picker" height="120px" /> | <img src="docs/datetime-mode-android.png" alt="react native date time picker android" height="120px" /><img src="docs/date-mode-android.png" alt="react native datepicker android" height="120px" /><img src="docs/time-mode-android.png" alt="react native time picker android" height="120px" /> |
@ -76,7 +78,9 @@ export default () => {
| textColor | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13 or higher. | <img src="docs/colors-ios.png" alt="react native datepicker text color background color ios" height="120px" /> | <img src="docs/colors-android.png" alt="Text color background color android" height="120px" /> | | textColor | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13 or higher. | <img src="docs/colors-ios.png" alt="react native datepicker text color background color ios" height="120px" /> | <img src="docs/colors-android.png" alt="Text color background color android" height="120px" /> |
| timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone) | | timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone) |
| dividerHeight | Change the divider height (only supported for iosClone) | | dividerHeight | Change the divider height (only supported for iosClone) |
| is24hourSource | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device') |
| is24hourSource | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device') |
## Linking
This package supports automatic linking. Usually, the only thing you need to do is to install cocoapods dependencies as descripted above and rebuild the project by running `react-native run-ios`, `react-native run-android` or start the build from within Xcode/Android Studio. If you'running a React Native version below 0.60 or your settup are having issues with automatic linking, you can run `npx react-native link react-native-date-picker` and rebuild. In some occations you even have to manually link the package. Instructions in <a href="https://github.com/henninghall/react-native-date-picker/issues/40">this issue</a>.
## About ## About

Write Preview
Loading…
Cancel
Save