ui: Improve time picker keyboard input

[jocrl]

Fixes #80655, mostly.

Previously, users had to type 1:03 PM (UTC) in order to enter text into the time picker.

This commit modifies the time picker so that users would instead type either

• 1:03, or
• 01:03

to enter text into the time picker. Copying and re-pasting the text from a time picker still works.

Alternate approaches not pursued (these are not needed with the removal of AM/PM).

1. Make our own time picker component, and style it to look like antd's. There's
   a general issue of antd's components not being keyboard friendly:
   Keyboard friendly DatePicker component ant-design/ant-design#5685

2. Upgrade to antd version 4, and use an undocumented prop type. antd's time
   picker uses the time picker from the rc-picker library under the hood. In
   rc-picker, the format prop is of type String | String[], where if it's an
   array the first value will be used for display and the remaining ones will be
   used for parsing, as documented here. In theory, antd passes format
   (and also any remaining, additional props in addition to the specified ones) to
   the rc-picker component. So even though the antd TimePicker component
   format prop is not documented to take in a string array, one might think that
   passing in a string array anyway would work. In practice, passing in a string
   array works in antd version 4.20.4, as tested in the antd sandbox
   (render <TimePicker format={ ["h:mm A", "h:mma"]}/>). However, this does not work in our codebase
   (which installs antd v3.25.2), or in the antd version 3.x sandbox. The errors that appear in
   these two situations are different, and in a way demonstrate the potential for
   breakage from using an undocumented feature in future upgrades from a version
   that we've to work. If we do this, we should add a test.

3. Dead end: The antd TimePicker component takes an onChange prop with a
   second timeString paramater. However, onChange only fires if the input is
   of the correct, parsable format. The specific code that ignores text input that
   is not of a parsable format is in rc-picker, here.
   This prevents us from being the one to do the fuzzy matching and passing the
   value back to the component.

Release note (ui): The time picker component has been improved such that users
can use keyboard input to select a time without having to type " (UTC)"

[cockroach-teamcity]

This change is 

[matthewtodd]

This seems like a good, simple improvement.

Reviewable status: complete! 1 of 0 LGTMs obtained

[maryliag]

Should you wait for #81077 to be merged or even rebase on top of it? Because that PR changes to a 24h format, so you won't need to input p or P for example, it would be just the number directly (on a 24h format)

Reviewable status: complete! 1 of 0 LGTMs obtained

[jocrl]

Yup! Rebased, thanks 🙂

[tbg]

Nice! I was about to say that the p thing wasn't a lot better than before (thanks for looking into it - what a pain). But I assume now that we've switched to 24h time, that oddity is gone and things actually work as one would expect?

[jocrl]

Nice! I was about to say that the p thing wasn't a lot better than before (thanks for looking into it - what a pain). But I assume now that we've switched to 24h time, that oddity is gone and things actually work as one would expect?

Yup, thanks! Both 03:03 and 3:03 will work. Will update the description.

[jocrl]

bors r+

[craig]

Build succeeded:

• GitHub CI (Cockroach)