Show date and time at the same time for datetime picker

[jancborchardt]

Currently when we use the datepicker e.g. in Nextcloud Calendar, it is often confusing to people that they first have to pick a date and then a time (even though they e.g. click on the part of the input which shows the time).

It would be great to make it look like the datetime-local picker works on Chromium. That way people can set either date or time, or both at the same time, whichever people need, and it’s not a forced 2-step flow. :)

---

It seems it’s already possible to show the date and timepicker side by side with the library: https://github.com/mengxiong10/vue2-datepicker/issues/674#issuecomment-1004843907

So let’s do that, and make that the only option when using the datetime picker, as the 2-step flow is not as nice by far.

[jancborchardt]

Ideally we could also do some small adjustments like:

• Remove the date in the header part of the timepicker, since that is already shown by the datepicker
• Reduce the width of the timepicker as that’s not really necessary
• Remove the seconds by default (as talked about in design review)
• Remove the divider inside the timepicker in favor of a divider between the datepicker and timepicker, since that is what needs to be separated

[szaimen]

How does it work in mobile if the width is too small to display the component?

[jancborchardt]

How does it work in mobile if the width is too small to display the component?

Yeah, good point:

• 7 days, width of 44px each: 308px
• 2 time slots, width of 44px each: 88px → 396px width (and probably some px more cause of borders and margins)

There are many mobile devices with 360px width: https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide

I’d say in that case, horizontal scrolling is totally fine though.

[dartcafe]

If you select a time span, you will have the double width (two date and two time selectors).

[jancborchardt]

If you select a time span, you will have the double width (two date and two time selectors).

For datetime timespan, It’s probably fine to do a 2-step process, yep. But only in that case.

[dartcafe]

How does it work in mobile if the width is too small to display the component?

With a time range it changes to horizontal. I guess with date and time panes, it will react this way too (haven't tested this).

[jancborchardt]

@dartcafe there does seem to be enough horizontal space to show the pickers side by side in this case, no? Or does it depend on the immediate parent, in this case the sidebar?

[dartcafe]

there does seem to be enough horizontal space to show the pickers side by side in this case

I guess, yes.

Or does it depend on the immediate parent, in this case the sidebar?

I think not, it should be tied to the body since a few releases.

[dartcafe]

But I would prefer it to become configurable, because I spent days, to get it working as it does now.

[jancborchardt]

But I would prefer it to become configurable, because I spent days, to get it working as it does now.

Are you referring to the vertical display of the date range selector? I’d say that’s perfect for the mobile view, on desktop it should show side by side (as it does on platforms which use this pattern a lot like Booking, Airbnb, etc.).

[dartcafe]

I am referring to the combined time and date display. The current implementation for polls allows to select different combinations (full day, just time or a time span with or without time).

Again to demonstrate the current implemantation:

I’d say that’s perfect for the mobile view, on desktop it should show side by side (as it does on platforms which use this pattern a lot like Booking, Airbnb, etc.).

That is the current behaviour and it is fine.