datetimepicker icon indicating copy to clipboard operation
datetimepicker copied to clipboard

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

Open MacKentoch opened this issue 6 years ago • 15 comments

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

MacKentoch avatar Jul 30 '19 15:07 MacKentoch

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! :)

Swaagie avatar Jul 31 '19 15:07 Swaagie

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!

henninghall avatar Aug 14 '19 10:08 henninghall

Awesome @henninghall !

This would be nice to be added to community datepicker.

MacKentoch avatar Aug 14 '19 12:08 MacKentoch

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 or sponsorships are welcome

vonovak avatar Feb 01 '20 18:02 vonovak

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

raynor85 avatar Jun 01 '20 11:06 raynor85

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

henninghall avatar Jun 18 '20 18:06 henninghall

Just released a native android design of the picker:

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

henninghall avatar Jul 12 '20 09:07 henninghall

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.

danilobuerger avatar Aug 31 '20 06:08 danilobuerger

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.

henninghall avatar Sep 03 '20 18:09 henninghall

Do you plan to release this feature?

tarashaidarTimechimp avatar Apr 10 '23 13:04 tarashaidarTimechimp

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

hello, is this feature already implemented?

qaezrun avatar Apr 03 '24 09:04 qaezrun

Is this still an active feature request?

Kreshnik avatar Apr 19 '24 18:04 Kreshnik