# antuikit / DatePicker

> DatePicker, with `text` and `bare` variants, and the suffix and the panel's arrows drawn from your icon pack.

Docs: https://antuikit.com/docs/components/datepicker

## Install

npx antuikit@latest init
npx antuikit@latest add date-picker

## Import

import { DatePicker } from "@/components/ui/date-picker";

## Demos

- [Basic](https://ui.antuikit.com/embed/date-picker/basic.md): A `DatePicker` opens a month calendar under the field and fills it with the day you click.
- [Picker modes](https://ui.antuikit.com/embed/date-picker/picker-modes.md): Set `picker` to `week`, `month`, `quarter` or `year` to pick a coarser unit than a single day.
- [Sizes](https://ui.antuikit.com/embed/date-picker/sizes.md): Set `size` to `small`, `medium` or `large` to match the height of the fields around the picker.
- [Variants](https://ui.antuikit.com/embed/date-picker/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare` to match the other fields in your form. `text` fills on hover and while focused, and `bare` draws nothing at all.
- [Status](https://ui.antuikit.com/embed/date-picker/status.md): Set `status` to `error` or `warning` to flag a date that needs attention.
- [Disabled](https://ui.antuikit.com/embed/date-picker/disabled.md): Set `disabled` to lock the field so it cannot be opened.
- [Range](https://ui.antuikit.com/embed/date-picker/range.md): `DatePicker.RangePicker` picks a start and an end date from one panel and highlights the days between them.
- [Open-ended range](https://ui.antuikit.com/embed/date-picker/allow-empty.md): Set `allowEmpty` on a `RangePicker` to let either end stay blank, like a filter with only a start or only an end date.
- [Partly disabled range](https://ui.antuikit.com/embed/date-picker/range-disabled.md): Pass `disabled` a pair on a `RangePicker` to lock one end while the other stays editable.
- [Multiple](https://ui.antuikit.com/embed/date-picker/multiple.md): Pass `multiple` to collect several separate dates in one field, with `maxTagCount="responsive"` folding the overflow into a count.
- [Show time](https://ui.antuikit.com/embed/date-picker/show-time.md): Add `showTime` to pick a time along with the date, on a single `DatePicker` or on both ends of a `RangePicker`.
- [Presets](https://ui.antuikit.com/embed/date-picker/presets.md): Pass `presets` to add one-click shortcuts beside the calendar, like Last 7, 30 and 90 days on a `RangePicker`.
- [Disabled date](https://ui.antuikit.com/embed/date-picker/disabled-date.md): Pass `disabledDate` a callback that returns `true` for days that cannot be picked, like weekends for a delivery date.
- [Linked start and end](https://ui.antuikit.com/embed/date-picker/min-max-date.md): Set `maxDate` on the start field and `minDate` on the end field from each other's value, so the end never comes before the start.
- [Need confirm](https://ui.antuikit.com/embed/date-picker/need-confirm.md): Set `needConfirm` to add an OK button to a plain date picker, or `needConfirm={false}` to commit a date and time without one.
- [Cell render](https://ui.antuikit.com/embed/date-picker/cell-render.md): Pass `cellRender` to draw your own calendar cells, like colored dots under days with events, and return `info.originNode` for the rest.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/date-picker`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `DatePicker` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.