Time Picker
Time pickers let users select a time for a form.
| install | yarn add @clayui/time-picker |
|---|---|
| version | 3.122.0 |
| Property | Description |
|---|---|
ariaLabels{
ampm: string;
hours: string;
minutes: string;
clear: string;
timeDown: string;
timeUp: string;
} | 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. The default value is { 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', } |
config{
use12Hours: Config;
use24Hours: Config;
} | Range settings for 12 or 24 hours. The default value is { 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, }, }, } |
disabledboolean | Flag to disable user interactions on the component. The default value is false |
defaultValue{
ampm?: InputAmPm;
hours: '--' | string;
minutes: '--' | string;
} | Property to set the default value (uncontrolled). The default value is { hours: DEFAULT_VALUE, minutes: DEFAULT_VALUE, } |
iconboolean | Flag to indicate if show time icon or not. The default value is false |
idstring | Id to be applied to clay-time-hours input. |
onChangeInternalDispatch<Input> | Called when input values change hour, minutes or ampm (controlled). |
onInputChangeInternalDispatch<Input> | Called when input values change hour, minutes or ampm (controlled).
@deprecated since v3.52.0 - use onChange instead. |
namestring | Name attribute for the hidden input (used for form submission). |
spritemapstring | The path to the SVG spritemap file containing the icons. |
timezonestring | Flag to indicate the timezone of the user. |
use12Hoursboolean | Flag to indicate if 12-hour use, when true, should show am/pm input. The default value is false |
values{
ampm?: InputAmPm;
hours: '--' | string;
minutes: '--' | string;
} | Sets the values for the hour, minute, or am/pm input (controlled).
@deprecated since v3.52.0 - use value instead. |
value{
ampm?: InputAmPm;
hours: '--' | string;
minutes: '--' | string;
} | Sets the values for the hour, minute, or am/pm input (controlled). |