Vulnerabilities for react-native-date-picker. 24 Aug, 2019, MIT. 0 H; 0 M; 0 L. React-native-date-picker 2.6.0, 05 Aug, 2019, MIT. 0 H; 0 M; 0 L.
This is a React Native Date Picker with following main features:
iOS | Android |
A slightly improved DatePickerIOS. | A custom made native component. |
Installation
npm install react-native-date-picker --save
react-native link react-native-date-picker
(Only needed for React Native <= 0.59)
Minimal Example
Properties
Prop | Description | Screenshots iOS | Screenshot Android |
---|---|---|---|
date | The currently selected date. | ||
onDateChange | Date change handler | ||
fadeToColor | Android picker is fading towords this background color. {color, 'none'} | ||
maximumDate | Maximum selectable date. | ||
minimumDate | Minimum selectable date | ||
minuteInterval | The interval at which minutes can be selected. | ||
mode | The date picker mode. {'datetime', 'date', 'time'} | ||
locale | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID. | ||
textColor | Changes the text color. | ||
timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone) |
About
FAQ
Can I use expo?
Unfortunately, expo does not support this date picker at the moment. Upvote this feature request if you would like to have it included.
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 France preference.How do i change the 12/24h or AM/PM format?
On iOS the 12/24h preference is determined by the
locale
prop. Set for instance locale='fr'
to get the France preference. On Android the 12/24h format is determined by the device setting. When using 12h mode the AM/PM part of the picker will be displayed.Is it possible to show only month and year?
This is unfortunately not possible due to the limitation in DatePickerIOS. You should be able to create your own month-year picker with for instance https://github.com/TronNatthakorn/react-native-wheel-pick.
Why does the Android app crash in production?
If you have enabled Proguard 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
):Roadmap
- Mode: datetime
- Mode: date
- Mode: time
- Locale support. (AM/PM, 12h/24h toggled and strings translated)
- Replace todays date with the string 'Today' (considering locale)
- Animate to date when state change occur.
- Switch between AM/PM when scrolling between forenoon and afternoon.
- Support maximumDate/minimumDate.
- Minute interval prop.
- Colored background support.
- Colored text support.
Why another React Native date picker?
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.
Active7 months ago
According to the RN docs, you have to call an async/await function to open the Android Date Picker. I've tried installing the Async to generator transform Babel preset and adding a .babelrc file with
{ 'plugins': ['transform-async-to-generator']}
but that just seems to throw an unexpected token error when adding any RN component using tags (eg < Image ... /> would throw and unexpected token error). This is what my function to open the Android Date Picker looks like
MiLeungMiLeung1,14122 gold badges1313 silver badges3737 bronze badges
4 Answers
My way without any packages, only using docs DatePickerAndroid and TimePickerAndroid
import components what you need. For me are:
Then set your state:
After declarate funcs:
Finally add to your view container:
As a result you must see differt picker for iOS and android.This is works for me, hope this will help for you.
SerjSerj
Solved. my function's syntax was wrong... this is what worked for me:
Keep in mind I was using createClass for this examples, not es6 classes.
MiLeungMiLeung1,14122 gold badges1313 silver badges3737 bronze badges
I used a library for the Date picker android in my app.Check the sample for usage:
For more details you can look here :
Hope this helps you :)
RitenRiten1,78122 gold badges1616 silver badges2424 bronze badges
Just call this function on one of your DatePicker button
albertalbert