Time Picker
Time pickers let users select a time for a form.
install | yarn add @clayui/time-picker |
---|---|
version | |
use | import TimePicker from '@clayui/time-picker'; |
Table of Contents
Example
import {Provider} from '@clayui/core'; import TimePicker from '@clayui/time-picker'; import React from 'react'; export default function App() { const [state, setState] = React.useState({ hours: '--', minutes: '--', }); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <TimePicker onChange={setState} timezone="GMT+01:00" use12Hours value={state} /> </div> </Provider> ); }
API Reference
TimePicker
({ ariaLabels, config, disabled, defaultValue, icon, id, name, onChange, onInputChange, spritemap, timezone, use12Hours, value, values, }: IProps) => JSX.Element
Parameters
Properties
ariaLabels
{ ampm: string; hours: string; minutes: string; clear: string; timeDown: string; timeUp: string; } | undefined
= {"ampm":"Select time of day (AM/PM) using up (PM) and down (AM) arrow keys","clear":"Delete the entered time","hours":"Enter the hour in 00:00 format","minutes":"Enter the minutes in 00:00 format","timeDown":"Time down","timeUp":"Time up"}
Add the labels for the input elements and the input clear button, use this to provide accessibility and internationalization. By default the text is in English.
config
{ use12Hours: Config; use24Hours: Config; } | undefined
= {"use12Hours":{"ampm":{"am":"AM","pm":"PM"},"hours":{"max":12,"min":1},"minutes":{"max":59,"min":0}},"use24Hours":{"ampm":{"am":"AM","pm":"PM"},"hours":{"max":23,"min":0},"minutes":{"max":59,"min":0}}}
Range settings for 12 or 24 hours.
disabled
boolean | undefined
Flag to disable user interactions on the component.
defaultValue
Input | undefined
= {"hours":"--","minutes":"--"}
Property to set the default value (uncontrolled).
icon
boolean | undefined
Flag to indicate if show time icon or not.
id
string | undefined
Id to be applied to clay-time-hours
input.
onChange
InternalDispatch<Input> | undefined
Called when input values change hour, minutes or ampm (controlled).
onInputChange
InternalDispatch<Input> | undefined
Called when input values change hour, minutes or ampm (controlled).
name
string | undefined
Name attribute for the hidden input (used for form submission).
spritemap
string | undefined
The path to the SVG spritemap file containing the icons.
timezone
string | undefined
Flag to indicate the timezone of the user.
use12Hours
boolean | undefined
Flag to indicate if 12-hour use, when true, should show am/pm input.
values
Input | undefined
Sets the values for the hour, minute, or am/pm input (controlled).
value
Input | undefined
Sets the values for the hour, minute, or am/pm input (controlled).
Returns
ElementContributors
Last edited May 11, 2025 at 5:57:01 PM
Table of Contents