Time picker
The Time picker component allows users to easily select a time from a list of options.
import { ... } from '@ag.ds-next/react/time-picker';Usage
Time picker components can be imported via the time-picker entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/time-picker';Props
| Prop | Type | Description |
|---|---|---|
| label | string | Describes the purpose of the field. |
| block? | boolean | If true, the field will stretch to the fill the width of its container. |
| clearable? | boolean | If true, the clear button will be rendered when there is a selected option. |
| disabled? | boolean | If true, the field will not be interactive. |
| emptyResultsMessage? | string | Message to display when no options match the users search term. |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
| hint? | string | Provides extra information about the field. |
| id? | string | Defines an identifier (ID) which must be unique. |
| inputRef? | Ref<HTMLInputElement> | Ref to the input element. |
| interval? | numberDefault: 15 | A number of minutes between 1 & 180 to create options at appropriate intervals. |
| invalid? | boolean | If true, the invalid state will be rendered. |
| loading? | booleanDefault: false | A boolean indicating whether to render the option's loading state. |
| max? | stringDefault: "24:00" | The maximum time for options to end (HH:mm). |
| maxWidth? | "md" | "lg" | "xl"Default: "md" | The maximum width of the field. |
| message? | string | Message to show when the field is invalid. |
| min? | stringDefault: "00:00" | The minimum time for options to start (HH:mm). |
| name? | string | A string specifying a name for the input control. |
| onBlur? | FocusEventHandler<HTMLInputElement> | Function to be fired following a blur event. |
| onChange? | ((value: DefaultComboboxOption | null) => void) | Function to be fired following a change event. |
| onFocus? | FocusEventHandler<HTMLInputElement> | Function to be fired following a focus event. |
| options? | undefined | Options are automatically generated with interval, max and min. |
| renderItem? | undefined | Item rendering is handled internally by TimePicker. |
| required? | boolean | If false, "(optional)" will be appended to the label. |
| timeFormat? | "h:mm aaa" | "hh:mm aaa" | "HH:mm"Default: "h:mm aaa" | The format to render the options' labels. |
| value? | DefaultComboboxOption | null | The value of the field. |
Source
You can view the full source code for this package on Github.