# SDateRangePicker

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SDateRangePicker

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value?` | `SDateRangeValue` | — |  |
| `size?` | `SDateRangePickerSize` | `'sm'` |  |
| `placeholder?` | `string` | `'YYYY-MM-DD ~ YYYY-MM-DD'` |  |
| `selectable?` | `[string, string]` | — |  |
| `maxRange?` | `number` | — | 최대 선택 일수 |
| `useTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
| `disabled?` | `boolean` | `false` |  |
| `width?` | `number \| string` | — |  |
| `name?` | `string` | — |  |
| `rules?` | `Rule[]` | — |  |
| `status?` | `SFieldStatus` | — |  |
| `label?` | `string` | — |  |
| `labelWidth?` | `number \| string` | — |  |
| `icon?` | `SIconName` | — |  |
| `iconColor?` | `SColor` | — |  |
| `labelTooltip?` | `string` | — |  |
| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
| `addonLabel?` | `string` | — |  |
| `addonAlign?` | `SFieldAddonAlign` | — |  |
| `hint?` | `string` | — |  |
| `error?` | `boolean` | — |  |
| `errorMessage?` | `string` | — |  |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end] |
| `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |

## Dependencies

### Used by

 - [SKeyValueTable](../SKeyValueTable)

### Depends on

- [SDivider](../SDivider)
- [SField](../SField)
- [SGhostButton](../SGhostButton)
- [SIcon](../SIcon)

### Graph

```mermaid
graph TD;
  SDateRangePicker --> SDivider
  SDateRangePicker --> SField
  SDateRangePicker --> SGhostButton
  SDateRangePicker --> SIcon
  SKeyValueTable --> SDateRangePicker
  style SDateRangePicker fill:#f9f,stroke:#333,stroke-width:4px
```