# Component/TimeRangePicker

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `value` | `TimeRange | undefined` | No |  |  |
| `onChange` | `((start: Date | null, end: Date | null) => void) | undefined` | No |  |  |
| `disabledTime` | `((value: Date | null, range?: "from" | "to" | undefined) => DisabledTimes) | undefined` | No |  |  |
| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium |  |
| `className` | `string | undefined` | No |  |  |
| `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
| `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부  - Input 요소 만큼의 100% 너비를 가집니다.  - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
| `disabled` | `boolean | undefined` | No |  |  |
| `error` | `boolean | undefined` | No |  |  |
| `onClose` | `(() => void) | undefined` | No |  |  |
| `zIndex` | `number | undefined` | No | getZIndex('picker') |  |
| `readOnly` | `boolean | undefined` | No | false |  |
| `onOpen` | `(() => void) | undefined` | No |  |  |
| `showRemoveButton` | `boolean | undefined` | No | false | Input 우측에 값 지우기 버튼 표시 여부  true: 값이 있을 때 마우스 호버 시(모바일에서는 호버 없이) 지우기(X) 버튼 표시 false: 항상 시계 아이콘만 표시 값이 없을 때는 설정과 관계없이 시계 아이콘이 표시됩니다. |
| `incrementMinute` | `number | undefined` | No | 1 | 지정된 배수 단위로 분 설정이 가능합니다. |
| `hideDisabledMinutes` | `boolean | undefined` | No | false | 비활성화된 분 항목을 목록에서 숨길지 여부  true: disabledMinutes로 비활성화된 분 항목이 목록에서 완전히 제거됩니다. false: 비활성화된 분 항목이 목록에 표시되지만 선택 불가능합니다. |
| `displayMode` | `undefined "bottomSheet" "popover"` | No | popover | TimePicker가 노출되는 모드입니다.  - 'bottomSheet'일 경우 모바일 BottomSheet 안에서 시/분 SelectChip 행으로 선택합니다. |
| `usePortal` | `boolean | undefined` | No | true |  |