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 (#366) 

* update readme

* update readme

* readme

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

+ 96
- 49
README.md View File

@ -29,19 +29,68 @@ This is a React Native Date Picker with following main features:
<td align="center"><code>androidVariant="iosClone"</code></td><td align="center"><code>androidVariant="nativeAndroid"</code></td> <td align="center"><code>androidVariant="iosClone"</code></td><td align="center"><code>androidVariant="nativeAndroid"</code></td>
</tr> </tr>
</table> </table>
## Requirements
- Xcode >= 11.6
- If using React Native 0.64, 0.64.2 or later must be used.
- If using Expo, SDK 42 or later must be used.
## Installation ## Installation
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 using expo, follow <a href="#using-expo">these steps instead.</a>
If you're having troubles after following these steps, there might be a <a href="https://github.com/henninghall/react-native-date-picker/#user-content-linking">linking issue</a> or you're <a href="https://github.com/henninghall/react-native-date-picker/#user-content-can-i-use-expo">using Expo</a>.
1. Download package with npm or yarn
## Requirements
```
npm install react-native-date-picker
```
- Xcode >= 11.6
- When using React Native v0.64, `0.64.2` or later should be used.
```
yarn add react-native-date-picker
```
2. Install pods
```
cd ios && pod install
```
3. Rebuild the project
```
npx react-native run-android
npx react-native run-ios
```
If you're having troubles after following these steps, there might be a <a href="https://github.com/henninghall/react-native-date-picker/#user-content-linking">linking issue</a>.
## Using Expo
<a href="https://expo.dev/">Expo</a> is supported by creating <a href="https://docs.expo.dev/clients/introduction/">a custom client</a>.
1. Create the custom client:
```
expo install react-native-date-picker expo-dev-client
```
2. Build the app
Locally
```
expo run:ios
expo run:android
```
Or in the cloud
```
eas build -p all --profile development
```
If you're having troubles, read the <a href="https://expo.canny.io/feature-requests/p/react-native-date-picker">pinned comment here. </a>
## Minimal Example ## Minimal Example
@ -50,55 +99,48 @@ import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker' import DatePicker from 'react-native-date-picker'
export default () => { export default () => {
const [date, setDate] = useState(new Date()) const [date, setDate] = useState(new Date())
return (
<DatePicker
date={date}
onDateChange={setDate}
/>
)
return <DatePicker date={date} onDateChange={setDate} />
} }
``` ```
## Properties
## Props
| Prop | Description | Screenshots iOS | Screenshot Android |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Prop | Description | Screenshots iOS | Screenshot Android |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. <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"/> |
| 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" /> |
| 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"/> |
| 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" /> |
| locale | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a <a title="react native datepicker locale id" href="https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html">Locale ID.</a> | <img src="docs/locale-ios.png" alt="React Native Date picker locale language ios" height="120px" /> | <img src="docs/locale-android.png" alt="React Native Date picker locale language 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" /> |
| locale | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a <a title="react native datepicker locale id" href="https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html">Locale ID.</a> | <img src="docs/locale-ios.png" alt="React Native Date picker locale language ios" height="120px" /> | <img src="docs/locale-android.png" alt="React Native Date picker locale language 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) |
| is24hourSource | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device') |
| 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') |
## Linking ## Linking
This package supports automatic linking. Usually, the only thing you need to do is to install the package, the cocoapods dependencies (as descripted above). Then 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 setup is having issues with automatic linking, you can run `npx react-native link react-native-date-picker` and rebuild. In some occations you'll have to manually link the package. Instructions in <a href="https://github.com/henninghall/react-native-date-picker/issues/40">this issue</a>.
This package supports automatic linking. Usually, the only thing you need to do is to install the package, the cocoapods dependencies (as described above). Then rebuild the project by running `react-native run-ios`, `react-native run-android` or start the build from within Xcode/Android Studio. If you're running a React Native version below 0.60 or your setup is having issues with automatic linking, you can run `npx react-native link react-native-date-picker` and rebuild. In some occations you'll 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
📅 &nbsp; React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particulary interesting if you looking for a way to avoid two different popup pickers on android.
📅 &nbsp; React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particularly interesting if you looking for a way to avoid two different popup pickers on android.
## FAQ ## FAQ
### How do I change the divider color? ### How do I change the divider color?
The color of the divider, separator (or whatever you choose to call it) can only be changed on android for the androidNative variant. To change it, add the following to your android AppTheme. The theme is often found in styles.xml.
The color of the divider, separator (or whatever you choose to call it) can only be changed on android for the androidNative variant. To change it, add the following to your android AppTheme. The theme is often found in styles.xml.
```xml ```xml
<item name="colorControlNormal">#ff0000</item> <item name="colorControlNormal">#ff0000</item>
``` ```
### Can I use expo?
Unfortunately, expo does not support this date picker at the moment. Upvote <a href="https://expo.canny.io/feature-requests/p/support-react-native-date-picker">this feature request</a> if you would like to have it included.
### How do i change the date order? (To YYYY-MM-DD etc) ### How do i change the date order? (To YYYY-MM-DD etc)
The order is determined by the `locale` prop. Set for instance `locale='fr'`to get the french preference. The order is determined by the `locale` prop. Set for instance `locale='fr'`to get the french preference.
@ -113,7 +155,7 @@ This is unfortunately not possible due to the limitation in DatePickerIOS. You s
### Why does the Android app crash in production? ### Why does the Android app crash in production?
If you have enabled <a href="https://facebook.github.io/react-native/docs/signed-apk-android#enabling-proguard-to-reduce-the-size-of-the-apk-optional">Proguard</a> for Android you might need to ignore some classes to get the the picker to work propery in android production/release mode. Add these lines to you proguard file (often called `proguard-rules.pro`):
If you have enabled <a href="https://facebook.github.io/react-native/docs/signed-apk-android#enabling-proguard-to-reduce-the-size-of-the-apk-optional">Proguard</a> for Android you might need to ignore some classes to get the the picker to work properly in android production/release mode. Add these lines to you proguard file (often called `proguard-rules.pro`):
``` ```
-keep public class net.time4j.android.ApplicationStarter -keep public class net.time4j.android.ApplicationStarter
@ -121,6 +163,7 @@ If you have enabled ``` ```
## Two different Android variants ## Two different Android variants
On Android there are two design variants to choose from: On Android there are two design variants to choose from:
<table> <table>
@ -131,29 +174,31 @@ On Android there are two design variants to choose from:
<img src="docs/react-native-date-picker-android-native.gif" alt="date time picker" height="120px" /> <img src="docs/react-native-date-picker-android-native.gif" alt="date time picker" height="120px" />
</td></tr> </td></tr>
<tr><td>The so called "iOS clone" looks and works similar to the ios version. It shows normaly 5 lines of dates. It is enabled by default.</td><td>
<tr><td>The so called "iOS clone" looks and works similar to the ios version. It shows normally 5 lines of dates. It is enabled by default.</td><td>
The "Android Native" version looks more like a standard native implementation on Android. The divider color can be changed by adding the following to you Android theme: The "Android Native" version looks more like a standard native implementation on Android. The divider color can be changed by adding the following to you Android theme:
<br><code>&lt;item name=&quot;colorControlNormal&quot;&gt;#03b6fc&lt;/item&gt;</code> <br><code>&lt;item name=&quot;colorControlNormal&quot;&gt;#03b6fc&lt;/item&gt;</code>
</td></tr> </td></tr>
<tr><td> <tr><td>
```js ```js
androidVariant="iosClone";
androidVariant = 'iosClone';
``` ```
</td><td> </td><td>
```js ```js
androidVariant="nativeAndroid";
androidVariant = 'nativeAndroid';
``` ```
</td></tr> </td></tr>
</table> </table>
## Three different modes ## Three different modes
Here are some more info about the three different picker modes that are available. Here are some more info about the three different picker modes that are available.
### Date time picker ### Date time picker
Using the datetime mode gives you a react native date time picker where both date and time can be selected at the same time. The todays date will be replays with the string "Today" translated to the desired language. This is the default mode and look like this. Using the datetime mode gives you a react native date time picker where both date and time can be selected at the same time. The todays date will be replays with the string "Today" translated to the desired language. This is the default mode and look like this.
<table><tr><td align="center"><b>iOS</b></td><td align="center"><b>Android</b></td> <table><tr><td align="center"><b>iOS</b></td><td align="center"><b>Android</b></td>
@ -164,7 +209,7 @@ Using the datetime mode gives you a react native date time picker where both dat
<img src="docs/datetime-mode-android.png" alt="date time picker" height="120px" /> <img src="docs/datetime-mode-android.png" alt="date time picker" height="120px" />
</td></tr></table> </td></tr></table>
Add the optional `datetime` mode property to use this mode. Since datetime is default this could also be exclude.
Add the optional `datetime` mode property to use this mode. Since datetime is default this could also be exclude.
```jsx ```jsx
<DatePicker <DatePicker
@ -174,7 +219,9 @@ Add the optional `datetime` mode property to use this mode. Since datetime is de
``` ```
### Datepicker ### Datepicker
The date mode displays a react native datepicker with year month and date where the year-month-date order will be adjusted to the locale. If will look similar to this:
The date mode displays a react native datepicker with year month and date where the year-month-date order will be adjusted to the locale. If will look similar to this:
<table><tr><td align="center"><b>iOS</b></td><td align="center"><b>Android</b></td> <table><tr><td align="center"><b>iOS</b></td><td align="center"><b>Android</b></td>
</tr><tr><td> </tr><tr><td>
<img src="docs/date-mode-ios.png" alt="datepicker ios" height="120px" <img src="docs/date-mode-ios.png" alt="datepicker ios" height="120px"
@ -183,7 +230,7 @@ The date mode displays a react native datepicker with year month and date where
<img src="docs/date-mode-android.png" alt="datepicker" height="120px" /> <img src="docs/date-mode-android.png" alt="datepicker" height="120px" />
</td></tr></table> </td></tr></table>
Just add the value `date` to mode property:
Just add the value `date` to mode property:
```jsx ```jsx
<DatePicker <DatePicker
@ -193,7 +240,9 @@ Just add the value `date` to mode property:
``` ```
### Time picker ### Time picker
The time mode can be used when only the time matters. AM/PM will be added depending on locale and user setting. It can be useful to add the `timeInterval` to only display the time with for instance 15min intervals. The react native time picker look like this:
The time mode can be used when only the time matters. AM/PM will be added depending on locale and user setting. It can be useful to add the `timeInterval` to only display the time with for instance 15min intervals. The react native time picker look like this:
<table><tr><td align="center"><b>iOS</b></td><td align="center"><b>Android</b></td> <table><tr><td align="center"><b>iOS</b></td><td align="center"><b>Android</b></td>
</tr><tr><td> </tr><tr><td>
<img src="docs/time-mode-ios.png" alt="react native time picker" height="120px" <img src="docs/time-mode-ios.png" alt="react native time picker" height="120px"
@ -202,7 +251,7 @@ The time mode can be used when only the time matters. AM/PM will be added depen
<img src="docs/time-mode-android.png" alt="react native time picker android" height="120px" /> <img src="docs/time-mode-android.png" alt="react native time picker android" height="120px" />
</td></tr></table> </td></tr></table>
Set mode property to `time` to show the time picker:
Set mode property to `time` to show the time picker:
```jsx ```jsx
<DatePicker <DatePicker
@ -211,10 +260,8 @@ Set mode property to `time` to show the time picker:
/> />
``` ```
## Why another React Native datepicker? ## Why another React Native datepicker?
One of the strongest reason to use react native is its cross platform compatibility. Most of the official components are working seamlessly on both platforms but there are some with single platform support only. The react native datepicker is one example where both <a href="https://facebook.github.io/react-native/docs/datepickerios">DatePickerIOS</a> and <a href="https://facebook.github.io/react-native/docs/datepickerandroid">DatePickerAndroid</a> are present. The reason for this is that the default date picker is implemented in seperate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.
If you want to use these pickers you can combile the official ones or a third party module that already done that for you. If you on the other hand want have a more unified design between your android and ios app, this module is for you. The datetime mode can be particularly helpful to avoid 2 separate picker dialogs on android.
One of the strongest reason to use react native is its cross platform compatibility. Most of the official components are working seamlessly on both platforms but there are some with single platform support only. The react native datepicker is one example where both <a href="https://facebook.github.io/react-native/docs/datepickerios">DatePickerIOS</a> and <a href="https://facebook.github.io/react-native/docs/datepickerandroid">DatePickerAndroid</a> are present. The reason for this is that the default date picker is implemented in separate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.
If you want to use these pickers you can combine the official ones or a third party module that already done that for you. If you on the other hand want have a more unified design between your android and ios app, this module is for you. The datetime mode can be particularly helpful to avoid 2 separate picker dialogs on android.

Write Preview
Loading…
Cancel
Save