Change #1218212 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] [WIP] UI demo / playground for time / date snak value support

https://gerrit.wikimedia.org/r/1218212

Based on my research, the Wheel-style picker is an native iOS / Swift user-interface component and is not normally available to web browsers. React applications are able to use Swift components because React-native can interface with the platform libraries, but we can't access that from the web browser and I didn't find an equivalent native component on android.

The options that we have:

1. Use the native HTML inputs to show the browser-native controls. Here are screenshots of the date and select pickers on iOS, Android and desktop:

iOS:

Android (Firefox):

Android (Chrome):

None of these launches the wheel picker, and we have fewer options to style the elements - it's not clear that we could make them fit to the Codex design language.

2. Implement our own wheel picker in Javascript. It should be possible to create a similar effect in pure Javascript - see, for example, this jQuery wheel picker implementation: https://www.jqueryscript.net/demo/ios-wheel-picker/ . This would be a from-scratch implementation and it would probably be a bit fiddly to make it work nicely on desktop and on mobile. Alternatively, we would need to have different picker implementations for desktop and mobile and display a picker based on the user's browser.

3. Stick to components from the Codex component library.

As far as I know, there is no way to call the native wheel picker from the mobile browser (and the wheel picker doesn't exist on Android), so I would recommend to stick to option 3. unless the user experience is so important to us that we want to develop a custom implementation of the picker (per 2.).

A PoC patch for using the native select elements is attached to this ticket.

@ArthurTaylor could you add a few screenshots of what the input triggering those controls looks like when it’s not focused and the controls aren’t active? It’s partially shown in some of the screenshots, but I think this is an important part of whether this solution works for us or not.

(In this experiment I tried to have a visually-hidden select that could be focused via JS to trigger the native controls, but it didn’t seem to work out – though admittedly I only spent very little time on it.)

@Lucas_Werkmeister_WMDE Sure. Here are how the (unstyled) inputs look on Android:

Chrome:

Firefox:

Those inputs are unstyled, and there are options for styling the <select> in modern browsers (e.g. https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), but the options for styling the date input are more limited.

Hello @ArthurTaylor and @Lucas_Werkmeister_WMDE and thank you so much for this! could we possibly have a meeting in the new year to talk about this - i am not sure i understand it fully, and need to flow these learnings into the design of https://phabricator.wikimedia.org/T409454 and https://phabricator.wikimedia.org/T409453!

Change #1218212 abandoned by Arthur taylor:

[mediawiki/extensions/Wikibase@master] [WIP] UI demo / playground for time / date snak value support

Reason:

we don't plan to merge this - was just there for illustration.

https://gerrit.wikimedia.org/r/1218212