use native input types (on mobile)

[Haroenv]

In smaller screens the custom inputs don't really work, since they're too small. However an <input type="date"> and <input type="time> are well supported and will offer a better experience on small screens.

[pietercolpaert]

@xavez what's your opinion?

@Haroenv Can we have a demo implementation of that in hyperRail to see how that would work?

[xavez]

I think this should definitely change, but I don’t know enough about angular to do it myself. Ideally, the following happens:

• Check for support of date input type with modernizr or vanilla JS
• Use native date input type if it is supported
• Load JS and CSS for a date picker if they are not supported

Concerning the time input, I think a custom implementation is probably the most user friendly. I’ve implemented this once:

[Haroenv]

I like how the time input works on iOS though, it's just one input to open vs two. Screenshot for reference:

[xavez]

@Haroenv correct, actually, I was mistaken in my comment, the same principle applies there: check for support, otherwise go with custom implementation

[Haroenv]

Progressive enhancement would consider desktop chrome as having support for input type=date though, I'm not sure if that's what we want ...

[xavez]

It’s an improvement over the current situation in any case. We don’t need to come up with the perfect design – we can iterate on it later I think.

@pietercolpaert do you have usage statistics for irail.be? Browser, Browser Version & Device?

[pietercolpaert]

Fiddle which enables/disables when input type date is supported/unsupported: http://jsfiddle.net/2AaFk/1/ → I think on a desktop chrome, the input field looks horrible. It looks "okay-ish" on firefox. Is there a way to style this in a nicer way?

Analytics for browsers and whether or not on a mobile phone

[Haroenv]

I think we should only use the native input method for Android and iOS, since the desktop implementations look pretty bad IMO.

The okay-ish on FF isn't the native field, but jQuery UI, which is used in that fiddle as a fallback.

[xavez]

You can check for touch events and load the appropriate stuff then.

But like I said, anything is better than the current implementation.

[xavez]

Who knows how to make this work in Angular? I can make the "prototype" code, but I have no idea how to bind the input to the actual search action.

[pietercolpaert]

@xavez it's pretty straightforward. I have made a mock-up in this branch: https://github.com/iRail/hyperRail/tree/fix-228

What I had to change: development...fix-228

[xavez]

Oh cool. Guess I’m not needed for this then ;) 👍

[pietercolpaert]

@xavez how do you mean? I implemented this for you to experiment with UX ;) Right now the UX in this branch on both phone and desktop is bad, yet maybe it's possible to make it better?

[xavez]

Great, I’ll have a look!