feat(datepicker): add androidMode property for DatePickerAndroid & TimePickerAndroid

#85

Author: feyy

README.md

@@ -72,6 +72,7 @@ You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/ma
 | style | - | `object` | Specify the style of the DatePicker, eg. width, height...  |
 | date | - | `string | date` | Specify the display date of DatePicker. `string` type value must match the specified format  |
 | mode | 'date' | `enum` | The `enum` of `date`, `datetime` and `time` |
+| androidMode | 'default' | `enum` | The `enum` of `default`, `calendar` and `spinner` (only Android) |
 | format | 'YYYY-MM-DD' | `string` | Specify the display format of the date, which using [moment.js](http://momentjs.com/). The default value change according to the mode. |
 | confirmBtnText | '确定' | `string` | Specify the text of confirm btn in ios. |
 | cancelBtnText | '取消' | `string` | Specify the text of cancel btn in ios. |

index.android.js

@@ -34,9 +34,7 @@ class datepicker extends Component {
 
   render() {
     return (
-      <View style={styles.container}
-            {...this._panResponder.panHandlers}
-      >
+      <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to react-native-datepicker example!
         </Text>

index.js

@@ -184,15 +184,16 @@ class DatePicker extends Component {
   }
 
   onDatetimePicked({action, year, month, day}) {
-    const {mode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props;
+    const {mode, androidMode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props;
 
     if (action !== DatePickerAndroid.dismissedAction) {
       let timeMoment = Moment(this.state.date);
 
       TimePickerAndroid.open({
         hour: timeMoment.hour(),
         minute: timeMoment.minutes(),
-        is24Hour: is24Hour
+        is24Hour: is24Hour,
+        androidMode
       }).then(this.onDatetimeTimePicked.bind(this, year, month, day));
     }
   }
@@ -220,14 +221,15 @@ class DatePicker extends Component {
       this.setModalVisible(true);
     } else {
 
-      const {mode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props;
+      const {mode, androidMode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props;
 
       // 选日期
       if (mode === 'date') {
         DatePickerAndroid.open({
           date: this.state.date,
           minDate: minDate && this.getDate(minDate),
-          maxDate: maxDate && this.getDate(maxDate)
+          maxDate: maxDate && this.getDate(maxDate),
+          androidMode
         }).then(this.onDatePicked);
       } else if (mode === 'time') {
         // 选时间
@@ -245,7 +247,8 @@ class DatePicker extends Component {
         DatePickerAndroid.open({
           date: this.state.date,
           minDate: minDate && this.getDate(minDate),
-          maxDate: maxDate && this.getDate(maxDate)
+          maxDate: maxDate && this.getDate(maxDate),
+          androidMode
         }).then(this.onDatetimePicked);
       }
     }
@@ -355,6 +358,7 @@ class DatePicker extends Component {
 
 DatePicker.defaultProps = {
   mode: 'date',
+  androidMode: 'default',
   date: '',
   // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only
   height: 259,
@@ -375,6 +379,7 @@ DatePicker.defaultProps = {
 
 DatePicker.propTypes = {
   mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
+  androidMode: React.PropTypes.oneOf(['calendar', 'spinner', 'default']),
   date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
   format: React.PropTypes.string,
   minDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-datepicker",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS",
   "main": "index.js",
   "scripts": {