TimeField

When to useLink to "When to use"

• A time of day in a form or filter: an opening hour, a reminder, a schedule.

Use something else when:

• it is a date: DateField
• it is a duration or a count of minutes: NumberField

UsageLink to "Usage"

import { TimeField } from "@arshad-shah/cynosure";

<TimeField label="Start time" value={start} onChange={setStart} min="09:00" max="17:30" step={15} picker />

The value is HH:MM (or HH:MM:SS with seconds) or null. 930, 9:30 pm and 12am are understood; anything that is not a time is kept for correcting and explained.

The pickerLink to "The picker"

picker adds a clock button at the end of the field. It opens columns for hours and minutes; the chosen time sits in the lens and applies at once.

12-hour and 24-hourLink to "12-hour and 24-hour"

By default the field follows the person's own language and region: 9:30 PM where AM and PM are used, 21:30 elsewhere. locale names the region for them; hourCycle={12} or hourCycle={24} fixes the form for everyone. The value, min, max and what a form receives stay 24-hour.

With 12-hour display the picker gains an AM/PM switch.

Limits and the day trackLink to "Limits and the day track"

The strip under the columns is the whole day: click or drag to jump to a time. The hours outside min and max are hatched, and their rows are struck through.

Without the day track, with secondsLink to "Without the day track, with seconds"

dayTrack={false} keeps the columns without the strip; seconds adds a third column.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

In the field:

In the picker (with picker):

• Errors are the field's description and set aria-invalid.
• Limits: min and max stop the arrows and the day track; typed times outside them are explained; their rows in the picker are disabled.
• The picker is a dialog named by labels.open. Each column is a listbox named by labels.hours, labels.minutes or labels.seconds; the day track is a slider that reads out the time.
• Scrolling a column chooses the row it stops on. With reduced motion the columns jump instead of gliding.
• Right to left: hours, minutes and seconds keep their order.

TouchLink to "Touch"

The field asks for the numeric keyboard (the full one when the time is shown as 12-hour, to type AM and PM). In the picker, rows are at least 44px tall on coarse pointers and a column is rolled with a finger.

ThemingLink to "Theming"

The field follows TextField, the popup Popover, the day track Slider and the AM/PM switch SegmentedControl. The picker's own tokens:

RelatedLink to "Related"

DateField · Calendar · NumberField