Skip to main content

format

Description​

Optional. Sets the time format for a time picker input

Usage​

format?: string | ((value: Date) => string);

Parameters​

  • string - a format string that defines how time should be displayed. The default value is "%H:%i".
  • function (value: Date) => string - a custom formatting function that takes a Date object and returns a formatted string.

Example​

<TimePicker value={value} format="%g:%i %a" />

Details​

Check the characters available for specifying the time format.

note

The format property specifies the time format for the input of the TimePicker control. To set the 12-hour/24-hour clock format for the TimePicker dropdown, you should also use the clockFormat property of the calendar object in the applied locale.

<Locale
    words={{
        calendar: { clockFormat: 12 },
    }}
>
    <TimePicker value={value} format="%g:%i %a" />
</Locale>

Related article: Setting the time format

Related sample: TimePicker