Permalink
Browse files

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 #10932

Differential Revision: D4176089

Pulled By: ericvicenti

fbshipit-source-id: 7dfa9101214501ac2124bda7ee273a538f04e7cf
  • Loading branch information...
pandiaraj44 authored and Facebook Github Bot committed Nov 23, 2016
1 parent d196ca7 commit eaccd7e82e228d744e6aef34b332d99c1ff616a5
@@ -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})}>
@@ -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
@@ -12,6 +12,7 @@
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.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 Dialog onCreateDialog(Bundle savedInstanceState) {
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)) {
@@ -48,6 +48,7 @@
/* 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 void onDismiss(DialogInterface dialog) {
* {@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 @@ private Bundle createFragmentArguments(ReadableMap options) {
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;
}
}
@@ -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
}
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.ReactNative.AppCompat.Light" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="android:textColor">@android:color/black</item>
</style>
@@ -10,4 +10,22 @@
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="SpinnerDatePickerDialog" parent="Theme.AppCompat.Light.Dialog" tools:targetApi="lollipop">
<item name="android:datePickerStyle">@style/SpinnerDatePickerStyle</item>
</style>
<style name="SpinnerDatePickerStyle" parent="android:Widget.Material.Light.DatePicker" tools:targetApi="lollipop">
<item name="android:datePickerMode">spinner</item>
</style>
<style name="CalendarDatePickerDialog" parent="Theme.AppCompat.Light.Dialog" tools:targetApi="lollipop">
<item name="android:datePickerStyle">@style/CalendarDatePickerStyle</item>
</style>
<style name="CalendarDatePickerStyle" parent="android:Widget.Material.Light.DatePicker" tools:targetApi="lollipop">
<item name="android:datePickerMode">calendar</item>
</style>
</resources>

3 comments on commit eaccd7e

@vitorebatista

This comment has been minimized.

Show comment
Hide comment
@vitorebatista

vitorebatista Nov 25, 2016

Good job, thanks!

vitorebatista replied Nov 25, 2016

Good job, thanks!

@faceach

This comment has been minimized.

Show comment
Hide comment
@faceach

faceach Mar 1, 2017

Great job, have you consider the timePicker?

faceach replied Mar 1, 2017

Great job, have you consider the timePicker?

@pandiaraj44

This comment has been minimized.

Show comment
Hide comment
@pandiaraj44

pandiaraj44 Mar 14, 2017

Contributor

Hi @faceach ,

I will check the possibilities and let you know.

Contributor

pandiaraj44 replied Mar 14, 2017

Hi @faceach ,

I will check the possibilities and let you know.

Please sign in to comment.