Replace timepicker with more usable native component

[fzakfeld]

The date and time picker on https://traewelling.de/stationboard is very tedious to use, especially on mobile. I didn't even find a way of inputting exact times (e.g. 14:53 instead of 14:55).

Please consider replacing this with a more user friendly native input[type=datetime-local]

Native components are already used here and provide much better UX: https://traewelling.de/trip/create

[HerrLevin]

"Better ux" is only true in parts. On mobile browsers the UX is definitely better. On desktop this is not the case.

Firefox, for example, only has a Calendar-Picker, no time-picker.

I'd rather use the native picker-interface of ios/android but that requires a text input style input, which would be absolutely too much for the stationboard autocomplete card.

Afaik there's no possibility to hide the input but still access/trigger the native picker. If you know a workaround, I'd be glad to implement it!

[HerrLevin]

Nvm, i might've found sth. https://github.com/codeclown/native-datepicker

[HerrLevin]

Okay, so I've pushed some changes into devl-b/timepicker-wip but it's really inconsistent/ugly behavior. Got the example-code from https://github.com/RickStrahl/datepicker-native/blob/master/vue/datepicker-button.vue

On firefox/macOS it's only an approx 10-20 px wide gap to press:

Screen.Recording.2024-08-02.at.12.56.38.mov

On Safari/iOS 17.5.1 it's a TWO BUTTON WIDE gap:
(It's a bit hard to see, but I'm touching the left filter-button every time except the first time the dialog opens)

RPReplay_Final1722595866.mp4

Any ideas on how to fix/conquer this @fzakfeld? :/