kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-09 13:37:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Android datepicker mode configurations added

Browse Source 
Summary:
Currently, The **DatePickerAndroid** component opens the native date picker with default mode. We can't able to change the mode via configurations. To support android **[date-picker mode](https://developer.android.com/reference/android/widget/DatePicker.html)**, existing component needs to be changed.

**For Android >= 5.0**, The DatePickerDialog doesn't provide the default method to change the mode of a date picker.  So I have added custom theme which will support two kinds of **mode('spinner','calendar')** ref:https://developer.android.com/reference/android/R.attr.html#datePickerStyle.

**For Android < 5.0,** The DatePickerDialog provides the default method to change the mode of a date picker. ref:https://developer.android.com/reference/android/widget/DatePicker.html#setCalendarViewShown(boolean).

With the help of **Build.VERSION.SDK_INT** I have done the above functionality with limited lines of code changes and also I have added the example to UIExplorer.

Closes https://github.com/facebook/react-native/pull/10932

Differential Revision: D4176089

Pulled By: ericvicenti

fbshipit-source-id: 7dfa9101214501ac2124bda7ee273a538f04e7cf
This commit is contained in:
Pandiarajan Nagarajan
2016-11-23 04:48:34 -08:00
committed by Facebook Github Bot
parent d196ca70db
commit eaccd7e82e
6 changed files with 109 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Examples/UIExplorer/js/DatePickerAndroidExample.js
View File

@@ -40,6 +40,9 @@ class DatePickerAndroidExample extends React.Component {
presetDate: new Date(2020, 4, 5),
allDate: new Date(2020, 4, 5),
simpleText: 'pick a date',
spinnerText: 'pick a date',
calendarText: 'pick a date',
defaultText: 'pick a date',
minText: 'pick a date, no earlier than today',
maxText: 'pick a date, no later than today',
presetText: 'pick a date, preset to 2020/5/5',
@@ -72,6 +75,24 @@ class DatePickerAndroidExample extends React.Component {
<Text style={styles.text}>{this.state.simpleText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Simple spinner date picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'spinner', {date: this.state.spinnerDate, mode: 'spinner'})}>
<Text style={styles.text}>{this.state.spinnerText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Simple calendar date picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'calendar', {date: this.state.calendarDate, mode: 'calendar'})}>
<Text style={styles.text}>{this.state.calendarText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Simple default date picker">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'default', {date: this.state.defaultDate, mode: 'default'})}>
<Text style={styles.text}>{this.state.defaultText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Date picker with pre-set date">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>