## DatePicker
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.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- value: Dayjs | [Dayjs, Dayjs], default —. Selected date (or range for RangePicker)
- picker: date | week | month | quarter | year, default date. Granularity
- size: small | middle | large, default middle. Field height — 24 / 32 / 40
- status: error | warning, default —. Validation state on the field
- showTime: boolean | object, default false. Add a time picker to the panel
- allowClear: boolean, default true. Show the clear affordance when a value is set
- presets: { label, value }[], default —. Quick ranges (RangePicker) — reporting windows
- disabled: boolean, default false. Disable the field
- format: string, default YYYY-MM-DD. Display/parse format
- disabledDate: (d) => boolean, default —. Constrain selectable dates
- onChange: (date) => void, default —. Fires with the new date(s)
Tokens: colorPrimary, borderRadius, controlHeight, colorBorder, DatePicker.cellActiveWithRangeBg, DatePicker.cellHoverBg.
Use when: 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).