# TimePicker

- Page: https://jiguang132.com/resources/arco-design/docs/time-picker
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Select the time on the popup panel to conveniently complete the time input control.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: The basic usage of TimePicker.
- **Status**: different status
- **Under Control**: `value` and `onChange` need to be used together.
- **Prefix**: Set the prefix via the `prefix` property
- **Size**: There are four sizes.
- **Disabled**: Disabled.
- **Custom format**: By setting `format`, you can customize the hour, minute, and second.
- **Step**: By setting `step`, you can customize the step length of the hour, minute, and second.
- **defaultValue**: TimePicker has a default value.
- **Extra content**: Show extra content.
- **Disable partial time option**: By setting `disabledHours` `disabledMinutes` `disabledSeconds`, you can disable some options of hour/minute/second.
- **12 hours**: By setting `use12Hours`, you can customize the hours, minutes, and seconds.
- **RangePicker**: Select time range.
- **disableConfirm**: Skip the confirm step and click directly to select time.
- **UTC**: Use `utcOffset` to set the UTC time. **Note: When using UTC or time zonetime, use timestamp or Date object when passing value. Strings cannot represent unique time, which will cause trouble.**
- **Timezone**: Use `timezone` to set timezone, if set the `utcOffset`, `utcOffset` takes effect. **Note: When using UTC or time zonetime, use timestamp or Date object when passing value. Strings cannot represent unique time, which will cause trouble.**

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Picker

Common properties of `TimePicker` and `RangePicker`

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|allowClear|Whether to show clear button|boolean |`true`|-|
|disableConfirm|Disable the confirm step, click to select time directly without click the confirm button.|boolean |`-`|2.12.0|
|disabled|Whether to disable|boolean |`-`|-|
|editable|Whether input box can be entered|boolean |`true`|-|
|error|Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)|boolean |`-`|-|
|hideDisabledOptions|Hide the disabled options|boolean |`-`|-|
|popupVisible|Whether the popup is visible or not|boolean |`-`|-|
|scrollSticky|The time column is automatically adsorbed and selected when scrolling|boolean |`true`|2.23.0|
|unmountOnExit|Whether to destroy popup when hidden|boolean |`-`|-|
|use12Hours|Display as 12 hours format, with default format h:mm:ss a|boolean |`-`|-|
|utcOffset|Set the timezone offset, set to 0 if utc time is required.|number |`-`|-|
|format|Date format, refer to [dayjs](https://github.com/iamkun/dayjs)|string |`HH:mm:ss`|-|
|timezone|timezone name, if `utcOffset` is set, `utcOffset` takes effect.|string |`-`|-|
|position|The position of the popup box|'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' |`bl`|-|
|size|Input box size|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|status|Status|'error' \| 'warning' |`-`|2.45.0|
|extra|Additional content at the bottom|ReactNode |`-`|-|
|prefix|prefix|ReactNode |`-`|2.43.0|
|triggerElement|Trigger element.|ReactNode |`-`|2.38.0|
|className|Additional css class|string \| string[] |`-`|-|
|icons|Used to configure icons|{ inputSuffix?: ReactNode } |`-`|-|
|placeholder|The placeholder of input box|string \| string[] |`-`|-|
|step|Set the hour/minute/second selection interval.|{ hour?: number; minute?: number; second?: number } |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|The props of the `Trigger` component|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|disabledHours|To specify the hours that cannot be selected|() => number[] |`-`|-|
|disabledMinutes|To specify the minutes that cannot be selected|(selectedHour) => number[] |`-`|-|
|disabledSeconds|To specify the seconds that cannot be selected|(selectedHour, selectedMinute) => number[] |`-`|-|
|getPopupContainer|The parent node of the popup|(node: HTMLElement) => Element |`-`|-|
|onClear|Callback when click the clear button|() => void |`-`|-|

### TimePicker

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|showNowBtn|Whether to show the button to select current time|boolean |`true`|2.21.0|
|defaultValue|To set default time|[CalendarValue](#calendarvalue) |`-`|-|
|value|To set time|[CalendarValue](#calendarvalue) |`-`|-|
|onChange|Callback when selected value changes|(valueString: string, value: Dayjs) => void |`-`|-|
|onSelect|Callback when select time|(valueString: string, value: Dayjs) => void |`-`|-|

### TimePicker.RangePicker

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|order|Whether the start and end times are automatically sorted|boolean |`true`|2.21.0|
|defaultValue|To set default time|[CalendarValue](#calendarvalue)[] |`-`|-|
|placeholder|The placeholder of input box|string[] |`-`|-|
|value|To set time|[CalendarValue](#calendarvalue)[] |`-`|-|
|onChange|Callback when the selected value changes|(valueString: string[], value: Dayjs[]) => void |`-`|-|
|onSelect|Callback when select time|(valueString: string[], value: Dayjs[]) => void |`-`|-|

### CalendarValue

```js
export type CalendarValue = Dayjs | Date | string | number;
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt