# date-time-range-picker

- 分组：组合组件（Composite）
- 页面：/components/date-time-range-picker
- 源码：packages/react/src/components/date-time-range-picker.tsx

## 导出

```ts
import { DateTimeRangePicker } from "@modra/react";
```

## Props（DateTimeRangePickerProps）

| 名称 | 必填 | 类型 | 说明 |
| --- | --- | --- | --- |
| `value` | 否 | `DateTimeRange` |  |
| `defaultValue` | 否 | `DateTimeRange` |  |
| `onValueChange` | 否 | `(value: DateTimeRange \| undefined) => void` |  |
| `disabled` | 否 | `boolean \| Matcher \| Matcher[]` |  |
| `placeholder` | 否 | `string` |  |
| `locale` | 否 | `Locale` |  |
| `dateFormat` | 否 | `string` | Date part of the displayed value. |
| `timeFormat` | 否 | `string` | Time part of the displayed value. |
| `clearable` | 否 | `boolean` | Shows a clear control when a value is set. Defaults to true. |
| `presets` | 否 | `DateTimeRangePickerPreset[]` |  |
| `onPresetSelect` | 否 | `(preset: DateTimeRangePickerPreset, value: DateTimeRange) => void` |  |
| `id` | 否 | `string` |  |
| `className` | 否 | `string` |  |
| `calendarClassName` | 否 | `string` |  |
| `aria-label` | 否 | `string` |  |
| `data-form-control` | 否 | `boolean \| string` | Internal marker applied by FormControl for status styling. |