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.

Examples

Usage

TimePicker

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

import React from "react";
import { TimePicker, TimePrecision } from "@commure/components-foundation";
function MyTimePicker() {
return <TimePicker
showArrowButtons={true}
selectAllOnFocus={false}
precision={TimePrecision.MINUTE}
disabled={false}
useAmPm
/>;
}
export default MyTimePicker;

API Reference

TimePicker

Prop NameRequired?TypeDescription
defaultValuefalseDateInitial time the `TimePicker` will display. This should not be set if `value` is set.
disabledfalsebooleanWhether the time picker is non-interactive.
maxTimefalseDateThe 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.
minTimefalseDateThe 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.
onChangefalse(newTime: Date) => voidCallback invoked when the user changes the time.
precisionfalseTimePrecisionThe precision of time the user can set.
selectAllOnFocusfalsebooleanWhether all the text in each input should be selected on focus.
showArrowButtonsfalsebooleanWhether to show arrows buttons for changing the time.
useAmPmfalsebooleanWhether to use a 12 hour format with an AM/PM dropdown.
valuefalseDateThe currently set time. If this prop is provided, the component acts in a controlled manner.

Related Reading

Blueprint Reference
DatePicker Component