diff --git a/README.md b/README.md index 4b9fc52..3124bd1 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ export default () => { | maximumDate | Maximum selectable date. | | minimumDate | Minimum selectable date | | minuteInterval | The interval at which minutes can be selected. | Date picker minute interval IOS | Date picker minute interval Android | -| mode | The date picker mode. {'datetime', 'date', 'time'} | Datepicker datetime mode iosdate mode iostime mode ios | react native datetime mode androiddate mode androidtime mode android | +| mode | The date picker mode. {'datetime', 'date', 'time'} | React native date time pickerReact native datepickerReact native time picker | react native date time picker androidreact native datepicker androidreact native time picker android | | locale | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID. | React Native Date picker locale language ios | React Native Date picker locale language android | | textColor | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13. | react native datepicker text color background color ios | Text color background color android | | timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone) | @@ -99,30 +99,71 @@ If you have enabled iOSAndroid + + date time picker + + date time picker + + +Add the optional `datetime` mode property to use this mode. Since datetime is default this could also be exclude. + +```jsx + +``` + +### 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: + +
iOSAndroid
+ datepicker ios + + datepicker +
+ +Just add the value `date` to mode property: + +```jsx + +``` + +### 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: + +
iOSAndroid
+ react native time picker + + react native time picker android +
+ +Set mode property to `time` to show the time picker: + +```jsx + +``` + + +## 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
DatePickerIOS and DatePickerAndroid 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. -