TimeFormatter
This is a React component

Source
import { TimeFormatter } from "@prestojs/ui";
TimeFormatter(props)

Formats a time input based on the browser's locale using Date.toLocaleString.

If the value is a string the time is parsed from it and a dummy Date object will be created. Note that you can pass localeOptions.timeZone but it will give the wrong results if value doesn't include the timezone offset.

Valid strings are:

  • 3:55 - hour & minutes
  • 09:30:15 - hour, minutes, seconds (with leading zero)
  • 22:40:15.320 - includes milliseconds
  • 10:30:15.345+10:00 - includes timezone offset

Alternatively value can be passed directly as a Date in which case toLocaleString will be called on it directly.

If no value is provided blankLabel is returned.

If an invalid value is provided invalidValueLabel is returned.

This is the default formatter used for TimeField

See also parseTime and [formatTime])(doc:formatTime)

ParameterTypeDescription
props.blankLabelReactNode

What to render when value is null, undefined or the empty string

Defaults to null

props.invalidValueLabelReactNode

What to render when passed value is not a valid time

Defaults to null

props.localeOptions

Options to pass through to toLocaleString

props.localesstring|Array

Optional locales to use. See using locales for more information.

*props.valuestring|Date|null

The value to parse. Should be in one of the following formats HH:mm, HH:mm:ss or HH:mm:ss.sss where:

  • HH is the number of complete hours that have passed since midnight as two decimal digits from 00 to 24.
  • mm is the number of complete minutes since the start of the hour as two decimal digits from 00 to 59.
  • ss is the number of complete seconds since the start of the minute as two decimal digits from 00 to 59.
  • sss is the number of complete milliseconds since the start of the second as three decimal digits

Examples