diff --git a/Examples/UIExplorer/js/DatePickerAndroidExample.js b/Examples/UIExplorer/js/DatePickerAndroidExample.js
index b362b78cd..eeb1e9a7b 100644
--- a/Examples/UIExplorer/js/DatePickerAndroidExample.js
+++ b/Examples/UIExplorer/js/DatePickerAndroidExample.js
@@ -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 {
{this.state.simpleText}
+
+
+ {this.state.spinnerText}
+
+
+
+
+ {this.state.calendarText}
+
+
+
+
+ {this.state.defaultText}
+
+
diff --git a/Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js b/Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js
index 6c2760890..413c0e40e 100644
--- a/Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js
+++ b/Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js
@@ -52,6 +52,10 @@ class DatePickerAndroid {
* * `date` (`Date` object or timestamp in milliseconds) - date to show by default
* * `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected
* * `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected
+ * * `mode` (`enum('calendar', 'spinner', 'default')`) - To set the date-picker mode to calendar/spinner/default
+ * - 'calendar': Show a date picker in calendar mode.
+ * - 'spinner': Show a date picker in spinner mode.
+ * - 'default': Show a default native date picker(spinner/calendar) based on android versions.
*
* Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11),
* `day` if the user picked a date. If the user dismissed the dialog, the Promise will
diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogFragment.java b/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogFragment.java
index 6568f3504..50d778841 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogFragment.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogFragment.java
@@ -12,6 +12,7 @@ package com.facebook.react.modules.datepicker;
import javax.annotation.Nullable;
import java.util.Calendar;
+import java.util.Locale;
import android.annotation.SuppressLint;
import android.app.DatePickerDialog;
@@ -21,6 +22,7 @@ import android.app.DialogFragment;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnDismissListener;
+import android.os.Build;
import android.os.Bundle;
import android.widget.DatePicker;
@@ -53,8 +55,43 @@ public class DatePickerDialogFragment extends DialogFragment {
final int month = c.get(Calendar.MONTH);
final int day = c.get(Calendar.DAY_OF_MONTH);
- final DatePickerDialog dialog =
- new DismissableDatePickerDialog(activityContext, onDateSetListener, year, month, day);
+ DatePickerMode mode = DatePickerMode.DEFAULT;
+ if (args != null && args.getString(DatePickerDialogModule.ARG_MODE, null) != null) {
+ mode = DatePickerMode.valueOf(args.getString(DatePickerDialogModule.ARG_MODE).toUpperCase(Locale.US));
+ }
+
+ DatePickerDialog dialog = null;
+
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+ switch (mode) {
+ case CALENDAR:
+ dialog = new DismissableDatePickerDialog(activityContext,
+ activityContext.getResources().getIdentifier("CalendarDatePickerDialog", "style", activityContext.getPackageName()),
+ onDateSetListener, year, month, day);
+ break;
+ case SPINNER:
+ dialog = new DismissableDatePickerDialog(activityContext,
+ activityContext.getResources().getIdentifier("SpinnerDatePickerDialog", "style", activityContext.getPackageName()),
+ onDateSetListener, year, month, day);
+ break;
+ case DEFAULT:
+ dialog = new DismissableDatePickerDialog(activityContext, onDateSetListener, year, month, day);
+ break;
+ }
+ } else {
+ dialog = new DismissableDatePickerDialog(activityContext, onDateSetListener, year, month, day);
+
+ switch (mode) {
+ case CALENDAR:
+ dialog.getDatePicker().setCalendarViewShown(true);
+ dialog.getDatePicker().setSpinnersShown(false);
+ break;
+ case SPINNER:
+ dialog.getDatePicker().setCalendarViewShown(false);
+ break;
+ }
+ }
+
final DatePicker datePicker = dialog.getDatePicker();
if (args != null && args.containsKey(DatePickerDialogModule.ARG_MINDATE)) {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogModule.java
index 3381b446c..1aeea410d 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogModule.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerDialogModule.java
@@ -48,6 +48,7 @@ public class DatePickerDialogModule extends ReactContextBaseJavaModule {
/* package */ static final String ARG_DATE = "date";
/* package */ static final String ARG_MINDATE = "minDate";
/* package */ static final String ARG_MAXDATE = "maxDate";
+ /* package */ static final String ARG_MODE = "mode";
/* package */ static final String ACTION_DATE_SET = "dateSetAction";
/* package */ static final String ACTION_DISMISSED = "dismissedAction";
@@ -109,6 +110,9 @@ public class DatePickerDialogModule extends ReactContextBaseJavaModule {
* {@code maxDate} (timestamp in milliseconds) the maximum date the user should be allowed
* to select
*
+ *
+ * {@code mode} To set the date picker mode to 'calendar/spinner/default'
+ *
*
*
* @param promise This will be invoked with parameters action, year,
@@ -173,6 +177,9 @@ public class DatePickerDialogModule extends ReactContextBaseJavaModule {
if (options.hasKey(ARG_MAXDATE) && !options.isNull(ARG_MAXDATE)) {
args.putLong(ARG_MAXDATE, (long) options.getDouble(ARG_MAXDATE));
}
+ if (options.hasKey(ARG_MODE) && !options.isNull(ARG_MODE)) {
+ args.putString(ARG_MODE, options.getString(ARG_MODE));
+ }
return args;
}
}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerMode.java b/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerMode.java
new file mode 100644
index 000000000..5106c9cce
--- /dev/null
+++ b/ReactAndroid/src/main/java/com/facebook/react/modules/datepicker/DatePickerMode.java
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+package com.facebook.react.modules.datepicker;
+
+/**
+ * Date picker modes
+ */
+public enum DatePickerMode {
+ CALENDAR,
+ SPINNER,
+ DEFAULT
+}
diff --git a/ReactAndroid/src/main/res/shell/values/styles.xml b/ReactAndroid/src/main/res/shell/values/styles.xml
index 1d8f04f4f..75a4c2c5e 100644
--- a/ReactAndroid/src/main/res/shell/values/styles.xml
+++ b/ReactAndroid/src/main/res/shell/values/styles.xml
@@ -1,5 +1,5 @@
-
+
@@ -10,4 +10,22 @@
- true
- @null
+
+
+
+
+
+
+
+
+
+