Simple time entry field

Show and Tell
1

I needed a specific sort of time entry field or a project, and none of the time pickers I looked at provided exactly what I needed, so I wrote my own. In case anyone else has similar needs, here’s the dependency:

https://anvil.works/build#clone:TDWD7UNQBS7AJSLR=FHAABUABY2DQGK4RFAOTO2GG

And here’s a demo:

Timepicker

The field allows entering time in a 24 hour format, and it color codes invalid times. When the field loses focus or the user presses enter it’ll normalize the time back to a legal value. You can customize the valid and error colors, and it exposes events for change, pressed enter, and losing focus.

To get/set the time dynamically string use .time

To set the time in the inspector, set the hour and minutes fields.

17 Likes
2

Looks useful, what exactly is the output of this?

3

Use the time property to get a string of the time entry, use the hour and minutes property to get integer values.

4

The field allows entering time in a 24 hour format, and it color codes invalid times. When the field loses focus or the user presses enter it’ll normalize the time back to a legal value.