Server: Include a timepicker into server

[raimund-schluessler]

I think it would be reasonable to also have a timepicker similar to the datepicker directly in server. A timepicker is used in multiple apps, such as @nextcloud/calendar, @nextcloud/deck and @nextcloud/tasks and currently looks different in all three apps. Also, the timepicker https://github.com/fgelinas/timepicker currently used in these apps has not been updated for nearly 4 years and should therefore be replaced.

Calendar:

Tasks:

Hence, I think it would be a good idea to have a timepicker in server in order to have a maintained one that looks equal in all apps, especially with the redesigned datepicker https://github.com/nextcloud/server/pull/5713.

What do you think @nextcloud/designers ?

[juliushaertl]

It would absolutely make sense to have components like that in the server. @raimund-schluessler Do you have any suggestion of an alternative timepicker library? I searched a bit when integrating it into deck, but did not came up with something nice, so i ended up using the outdated one as well.

[dartcafe]

And there ist another one in the polls app. Having a server wide default option would be a good idea.

[tcitworld]

At some point it would be nice to detect if the browser offers a native datetime picker : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

[georgehrke]

Eventually we should definitely use the HTML5 inputs, but right now the implementation is still very rudimentary. Speaking about Chromium 61 on macOS, it offers a really bad UX.

• It doesn't actually offer a time selector although its datetime
• If I use the cursor keys to go from 12h to 1h it doesn't toggle AM/PM
• etc ...

[dartcafe]

Seems to be quite flexible.
http://amsul.ca/pickadate.js/

[tcitworld]

Android build-in support is just fine though.

[juliushaertl]

Seems to be quite flexible.
http://amsul.ca/pickadate.js/

That also seems to be unmaintained at the moment.

[pixelipo]

Support for datetime-local is very bad at the moment:
http://caniuse.com/#search=datetime-local

[raimund-schluessler]

I also don't have a good replacement to propose at the moment.

The one that shows up when you look for jquery-timepicker on NPM (https://github.com/wvega/timepicker) seems to be maintained still, but not very flexible (it seems that it can only show a list of times, but not a table for selection).

[jancborchardt]

Oh yes – holy hell the current timepicker is bad. Should I make a mockup akin to the datepicker or does some other @nextcloud/designers want to take a stab at it? :)

[raimund-schluessler]

I think a mockup for a new design would be nice.

But before implementing this in CSS we need to decide on the underlying javascript library.

[pixelipo]

Maybe something more _Material_-istic?

https://github.com/material-pickers/time

Doesn't seem to be super-active, but it's not dead either.

It is missing some interesting/important features, such as - use the already set time, start from current time, follow cursor, drag-and-release, animated marker, automatically move to minutes-selector after selecting hours. Perhaps the author would be interested in accepting contributions...

On the other hand, IMO this design is much more natural and faster compared to all the others mentioned :arrow_up: Plus it is the only one that allows selecting any of the 60 minutes included in the hour - this is a killer feature for me :1st_place_medal:

[raimund-schluessler]

On the other hand, IMO this design is much more natural and faster compared to all the others mentioned ⬆️ Plus it is the only one that allows selecting any of the 60 minutes included in the hour - this is a killer feature for me 🥇

The demo on this page gives me a timepicker where I can only select full hours?! Am I missing something?

[tcitworld]

The minutes picker shows up after clicking « ok ».

[dartcafe]

Any progression in chosing a default time picker?

[jancborchardt]

Slight visual design improvement to the timepicker at https://github.com/nextcloud/server/pull/7054, please review! :)

I would absolutely not go for an Android-style clock-face time picker for several reasons:

• Barely anyone is used to circular clocks anymore
• The distinction between AM and PM is super confusing
• Check out how iOS does it, much better – for Nextcloud 14 we should do it more like that
  

And that two times next to each other for Start time and End time. cc @raimund-schluessler @georgehrke

[MorrisJobke]

macOS:

especially a nice feature for the ending time:

[pixelipo]

@jancborchardt isn't the iOS solution very touchscreen-oriented?

[jancborchardt]

@pixelipo yes, forgot to add some details:

• The display of the current time should be an input field, for hour as well as minute.
• The minute picker could do jumps of 5 minutes instead of 1.

But yeah, on macOS there’s not even any kind of time picker, except that one for the ending time …

[raimund-schluessler]

I guess this is done now with https://github.com/nextcloud/vue-components?

[MorrisJobke]

I guess this is done now with https://github.com/nextcloud/vue-components?

cc @skjnldsv @ChristophWurst

[skjnldsv]

Yes! :)
But it's not really into server. Though we should recommend using vue?

[jancborchardt]

We can consider this done and closed because the Vue component is available and real nice! :) And yes, we should recommend using Vue since it makes it much easier for app developers to provide a great UX.