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