Android datepicker mode configurations added

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

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)) {

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
    *    </li>
+   *   <li>
+   *      {@code mode} To set the date picker mode to 'calendar/spinner/default'
+   *   </li>
    * </ul>
    *
    * @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;
   }
 }

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
+}