Add an option to reset route date to "Now"

[guytepper]

On the date prompt on android devices, add a button next to the Leave At and Arrive At controls that can reset the date selection to the current date & time.

The button should not be a part of the segmented controls - it's a standard button that looks similar to the other controls, but without the blue underline.

The button should greyed out initially (in a disabled state). After the user has changed the date, the disabled state should be removed and the button needs to look tappable.

This is a quick & dirty mock up - feel free to make adjustments to make it look great!

[maormagori]

Why is this labeled android? Does the IOS date-picker-modal offer a solution?

I recently came across this issue so I think it's a pretty common one. I had a design in mind that's quite different from yours. I'll make a mock-up later on so you could tell me what you think.

[guytepper]

@maormagori You're right, it should be available for both platforms. The feature request came from an Android user so that what probably made me label it as such. I also don't have an idea at the moment for how to implement this on iOS in a way that feels integrated - let me know if you have something in your mind!

Looking forward for your mockup :)

[maormagori]

The button should not be a part of the segmented controls - it's a standard button that looks similar to the other controls, but without the blue underline.

This is where my idea differs. I think that the tabs represent the meaning of the selected time and therefore should not contain another "time picker". In my opinion, the best option is to incorporate a "reset time" button using the restore icon.

At first I thought that the button should be inside date-picker-modal with a flat design. (Keep in mind this is a mockup)

Inside modal example

But this will cause the user to expect date-picker to scroll back to the original time which will be annoying to implement in my opinion. But I haven't checked the react-native-date-picker source code yet. So my second Idea is to put the reset button outside the modal, either using a flat button or keeping the app's current button design, like so:

Outside modal example

flat design:

Keeping the same design:

The button should greyed out initially (in a disabled state). After the user has changed the date, the disabled state should be removed and the button needs to look tappable.

I certainly agree with this and it applies to all of my ideas.

Let me know what you think! :)

[maormagori]

Looking at solutions other apps offer to this problem got me doubting my button approach. It looks like there isn't really an overall agreement on where and how to place the button. Even in the same app on different platforms. Google Maps for example:

Google Maps

It's the same with Moovit. I'm not sure what approach is better but I've reached my design skills' limit 😩

[guytepper]

The mockup I made in the issue description was actually inspired by Google Maps :P

I agree with you that putting the “reset time” button next to the origin/destination tabs is a bit counter intuitive; however I think that Google’s solution derived from the need for a compact and clear UI which makes sense here.

I think for the most part, users won’t need to reset the time in their day to day usage of the app. It’s a somewhat rare occasion, but one we agree we need to provide a solution for.

I think your design suggestions are interesting, and your first mockup is a good direction that meets the user where they are. I’m not sure if the icon provides the most clarity for the user and if it’s “bold” presence won't lead to distraction and unease to the user. Have you seen something similar being used in the wild?

[maormagori]

Have you seen something similar being used in the wild?

Here's how Moovit implements the button.

The more I think about it, the more I lean towards your initial design idea. It's been proven to work by a giant company and it's easier to implement. I might find some time next week to work on it but feel free to pick it up 😊

[guytepper]

I would love you to see a PR submitted from you! No better time than hacktoberfest to make a new contribution 😉

I think all work should be done in date-picker-modal.android.tsx. If you face any problems during the project installation or anything else comes up, let me know! I'm here to help :)

[guytepper]

@planecore it was closed since you deleted your user's repo. Let's implement the Android variation later on the v2.0 journey?

[MenachemZeivald]

Hi! is this issue still relevant?

I thought to add the option like this:

[guytepper]

@MenachemZeivald this might work for a desktop UI, but on mobile it won't be usable, since the placement of the Reset link is inside a button. I think @planecore was handling this issue, so wait for his response on the progress

[MenachemZeivald]

Oh, I didn't notice this task was already assigned

[planecore]

Hey @MenachemZeivald and @guytepper!

I tackled this issue with a reset button in the planner screen, let me know what you think in #226