# DatePicker
> Generated from datepicker.contract.json — do not edit by hand.

Pick a date or a date range from a calendar — schedules, deadlines, filters — rendered through the shared DatePicker.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | Dayjs | [Dayjs, Dayjs] | `—` | Selected date (or range for RangePicker) |
| `picker` | date | week | month | quarter | year | `date` | Granularity |
| `size` | small | middle | large | `middle` | Field height — 24 / 32 / 40 |
| `status` | error | warning | `—` | Validation state on the field |
| `showTime` | boolean | object | `false` | Add a time picker to the panel |
| `allowClear` | boolean | `true` | Show the clear affordance when a value is set |
| `presets` | { label, value }[] | `—` | Quick ranges (RangePicker) — reporting windows |
| `disabled` | boolean | `false` | Disable the field |
| `format` | string | `YYYY-MM-DD` | Display/parse format |
| `disabledDate` | (d) => boolean | `—` | Constrain selectable dates |
| `onChange` | (date) => void | `—` | Fires with the new date(s) |

## Visual standard (measured)
- Field: height 32 · radius 8 · 1px #E3E3E3 border
- Selected cell: brand #6A1EBB
- In-range: brand-tint #F9F5FF
- Hover cell: #F7F7F7 (gray-20)
- Placeholder: #8A8A8A

## When to use
- **DatePicker** — a single date — a deadline, a start date
- **RangePicker** — a start and end together — a reporting window, a schedule
- **Input** — a free-form date the user already knows precisely — but prefer the picker for validity

Pre-fill a sensible default (today, or the current period) rather than empty. Constrain impossible dates with disabledDate instead of validating after the fact. Dates use Day.js.