Time Picker

Introduction

A TimePicker allows the user to specify a time.

TimePicker has no direct localization support. You should handle localization directly in your application if needed.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Live Playgrounds coming soon!

Usage

TimePicker

When a time is required, and the date is not relevant, this input component simplifies entry for the user.

1import React from "react";
2import { TimePicker, TimePrecision } from "@commure/components-foundation";
3
4function MyTimePicker() {
5  return (
6    <TimePicker
7      showArrowButtons={true}
8      selectAllOnFocus={false}
9      precision={TimePrecision.MINUTE}
10      disabled={false}
11      useAmPm
12    />
13  );
14}
15
16export default MyTimePicker;

API Reference

TimePicker

Prop Name	Required?	Type	Description
defaultValue	false	Date	Initial time the `TimePicker` will display. This should not be set if `value` is set.
disabled	false	boolean	Whether the time picker is non-interactive.
maxTime	false	Date	The latest time the user can select. The year, month, and day parts of the `Date` object are ignored. While the `maxTime` will be later than the `minTime` in the basic case, it is also allowed to be earlier than the `minTime`. This is useful, for example, to express a time range that extends before and after midnight. If the `maxTime` and `minTime` are equal, then the valid time range is constrained to only that one value.
minTime	false	Date	The earliest time the user can select. The year, month, and day parts of the `Date` object are ignored. While the `minTime` will be earlier than the `maxTime` in the basic case, it is also allowed to be later than the `maxTime`. This is useful, for example, to express a time range that extends before and after midnight. If the `maxTime` and `minTime` are equal, then the valid time range is constrained to only that one value.
onChange	false	(newTime: Date) => void	Callback invoked when the user changes the time.
precision	false	TimePrecision	The precision of time the user can set.
selectAllOnFocus	false	boolean	Whether all the text in each input should be selected on focus.
showArrowButtons	false	boolean	Whether to show arrows buttons for changing the time.
useAmPm	false	boolean	Whether to use a 12 hour format with an AM/PM dropdown.
value	false	Date	The currently set time. If this prop is provided, the component acts in a controlled manner.

Related Reading

Blueprint Reference

DatePicker Component