[4.x] Change Time fieldtype from text to time input type

[aaronbushnell]

This pull request changes the Time fieldtype to use <input type="time"> instead of <input type="text">. This is valuable for a couple reasons:

1. This native fieldtype already implements incrementing and decrementing the values without needing to implement those manually
2. 12-hour and 24-hour presentations are supported based on the user's OS locale settings (See Allow the time field to display time in 12 hour format ideas#1074)

[jasonvarga]

Nice changes, thanks!

There are a couple of issues:

The new width of the time portion makes the date get cut off when used in a sidebar.

In Firefox the time is cut off:

I've only checked this out on Safari, Chrome, and Firefox on a Mac.

Do you know how to change to 24 hour time? Apparently it reads your system settings, but even when I tell my Mac to display 24 hours, the field doesn't change. Were you able to test that?

[aaronbushnell]

Hey @jasonvarga, thanks a bunch! Couple updates for you:

Do you know how to change to 24 hour time? Apparently it reads your system settings, but even when I tell my Mac to display 24 hours, the field doesn't change. Were you able to test that?

Yeah, the 24-hour config varies a bit by browser. What winds up working most consistently across browsers is if your OS language defaults to a 24-hour time and you perform a restart. When I set my macOS language to "English (UK)" and restart my browser I get the 24-hour time format.

The new width of the time portion makes the date get cut off when used in a sidebar.

Good catch! I made a handful of CSS changes that should make the date, date + time, and date + time + seconds look more consistent in a sidebar and content area context:

[jasonvarga]

When I set my macOS language to "English (UK)" and restart my browser I get the 24-hour time format.

Confirmed. Kinda stupid though. Even if I set 24 hour time in my Mac settings (pictured), it doesn't respect it. I have to use the entire alternate locale and reboot like you said. Not a fault of this PR obviously.

Thanks!

[aaronbushnell]

Thanks so much, @jasonvarga! Yeah, such a peculiar setting!