Datetimepicker: Android Time / Date Picker as component (= not a Dialog)?

[MacKentoch]

Feature Request

Android Picker is actually a service opening a dialog (see Android TimePickerDialog).
But Android TimePicker is not just meant to be inside a dialog as far as documentation says

For a dialog using this view, see TimePickerDialog. See the Pickers guide for more information.

It could be a View/Fragment embeddable within a View or scene (as iOS Picker).

Why it is needed

When iOS control is already displayed, Android is embedded in a Dialog, so:

• worse user xp in android - Android user need 1 more action (compared to iOS one to be able to edit)
• More chance Android user misses the input - iOS user already see what he is supposed to edit (date or time) and what is default value in the same time

Possible implementation

Picker for android could have an option to display TimePicker within a View as a Component and not a service ( Android TimePickerDialog would be just for service or dialog use-case ).

[Swaagie]

If possible - and I tend to agree with you that it seems possible - this would be a nice feature. When the code was moved from core to a community module the JS API was changed to act more like a regular React.Component. If we could go all the way and just render the Date or TimePicker inline similar to iOS that would be a really good feature.

I do wonder what the default implementation for Android is though? I agree that the UX is not optimal. However, that said, most of the integrations with for instance google calendar or similar seem to use the Pickers from a Dialog. Would value feedback here from someone who is more intimate with Android design principles than I am! :)

[henninghall]

I agree that the ios picker is more user-friendly in several ways. It is particularly suitable where the user is expected to pick a date within a small range of dates.

I have tried to solve this with react-native-date-picker. Is that something similar you had in mind? Would love the hear what you think about it!

[MacKentoch]

Awesome @henninghall !

This would be nice to be added to community datepicker.

[vonovak]

this should be doable - see https://mkyong.com/android/android-date-picker-example/ or https://www.tutlane.com/tutorial/android/android-timepicker-with-examples

contributions are welcome

[raynor85]

@henninghall I think it is already possible if you pass the prop "display="spinner"" to the component

[henninghall]

@raynor85 I think the problem is that the spinner is still in a dialog and not inline like the iOS version

[henninghall]

Just released a native android design of the picker:

https://github.com/henninghall/react-native-date-picker

[danilobuerger]

This can be done with the native DatePicker on android. Currently we use the following layout for it:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <DatePicker
        android:id="@+id/date_picker"
        android:datePickerMode="spinner"
        android:calendarViewShown="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Then in the component:

class DatePickerView extends LinearLayout {
    DatePickerView(final Context context) {
        super(context);

        inflate(context, R.layout.date_picker, this);
        datePicker = findViewById(R.id.date_picker);
    }
}

Would be nice if this could be supported here, then we wouldn't need our own custom component for it.

[henninghall]

This can be done with the native DatePicker on android.

That one only works for dates, and you can use TimePicker for time. What's missing is the datetime mode where you can select date and time at the same time.