Enhancing Usability of Date/Time questions on mobile phones

[tjeyh]

Nextcloud (please complete the following information):

• Nextcloud-Version: 30.0.6
• Forms-Version: latest

Is your feature request related to a problem? Please describe. In current use cases, forms are filled out by users without Nextcloud accounts on their smartphones (iOS or Android). When using the DatePicker feature, a date view opens that is difficult to navigate via touchscreens. Specifically, entering the correct year proves challenging for users, such as when inputting a date of birth.

~Even when selecting the text field with the restriction “numbers only”, the input data is only checked when the “Submit” button is pressed.~

Describe the solution you'd like Integrate Native Date Pickers:
The DatePicker should utilize the device's native picker on smartphones. This approach would enhance user experience by leveraging familiar interfaces across both iOS and Android platforms, improving ease of use and accuracy.

~Enhance Number Input Fields: When a field is set to "numbers only," ensure that the smartphone keyboard exclusively displays numeric options. This will minimize input errors and streamline the data entry process for users.~

Additional context This would significantly improve the usability of the mobile phone and thus minimize incorrect entries by users. Many thanks!

--- Edit --- Removed the number input related parts as we already add the correct input type and it's up to the Browser/OS to react on that.

[Chartman123]

Hi @tjeyh,

thanks for the feature request. We've already discussed switching the date/time pickers to the native pickers, so it's very likely to happen soon. If you're up for some coding you could also give it a try. This should not be very difficult :)

Regarding the number inputs: did you really set the field in edit mode to the correct type? We're already setting the correct input type here:

https://github.com/nextcloud/forms/blob/2e6d79798b9734d3579a347f5968a9efc0634428/src/components/Questions/QuestionShort.vue#L29

[tjeyh]

Hi @Chartman123, thanks for your quick feedback! :-)

Regarding the number inputs: I may have worded that a little awkwardly. I mean, if you are using a standard short text field, you can set the option: Numbers only. When I select this option, the entire keyboard is still displayed on the phone (in my case, iOS Safari). It may be possible to display a native keyboard on the phone that only allows entering numbers.

I hope this helps. :-)

[Chartman123]

@tjeyh is this the initial presentation of the keyboard or did you switch the shown characters before the screenshot?

[tjeyh]

@Chartman123 it is the initial presentation of the keyboard.

[Chartman123]

Ok, thanks, then everything is already working as expected. We can't do more here, it's up to the OS/Browser to react to the set input type and to show the corresponding keyboard layout.

[Chartman123]

Sorry, closed it too quickly... The date picker part will of course be kept open until it's done :)

[susnux]

The date picker part will of course be kept open until it's done :)

We could use DateTimePickerNative where possible. But otherwise it will be fixed if we migrate to Vue 3 due to the new picker.