# Date Picker

> Date field that opens a month calendar in a Popover.

Component · Forms · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/DatePicker/)

Date field that opens a month calendar in a Popover. `range` picks a from–to span and adds presets.

Props: `label`, `value`/`defaultValue` (Date, or {from, to} with `range`), `onChange`, `range`, `presets` (false to hide), `min`, `max`, `today`, `placeholder`, `hint`, `error`, `required`. `Calendar` is the bare month grid for inline use.

- Weeks start on Monday; dates read DD.MM.YYYY. Today has a dot under the number.
- A range closes after the second click; a single date closes after one.
- Presets cover the ranges people actually pick (7, 30, 90 days, this year); keep them to four.

## Example

```tsx
import * as React from "react";
import { Calendar, DatePicker } from "@twentyfirstmedia/pro";
import type { DateRange } from "@twentyfirstmedia/pro";

function App() {
  const d = React.useState<Date | DateRange | null>(new Date(2026, 3, 16)),
    r = React.useState<Date | DateRange | null>({
      from: new Date(2026, 3, 6),
      to: new Date(2026, 3, 16),
    });
  return (
    <div
      className="tf-panel tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
          alignContent: "start",
        } as React.CSSProperties
      }
    >
      <DatePicker label="Due date" value={d[0]} onChange={d[1]} today={new Date(2026, 3, 16)} />
      <DatePicker
        label="Report range"
        range
        value={r[0]}
        onChange={r[1]}
        today={new Date(2026, 3, 16)}
        hint="Presets on the left"
      />
      <div
        style={{
          gridColumn: "1 / -1",
        }}
      >
        <div
          className="tf-popover"
          style={{
            position: "static",
            width: 476,
            maxWidth: "100%",
            animation: "none",
          }}
        >
          <div className="tf-dp with-presets">
            <div className="tf-dp-presets">
              {["Last 7 days", "Last 30 days", "Last 90 days", "This year"].map((x, i) => (
                <button key={x} type="button" className={"tf-dp-preset" + (i === 0 ? " on" : "")}>
                  {x}
                </button>
              ))}
            </div>
            <Calendar range value={r[0]} today={new Date(2026, 3, 16)} onChange={r[1]} />
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;
```

## Props

### Calendar

| Prop | Type | Notes |
| --- | --- | --- |
| `range?` | `boolean` |  |
| `value?` | `Date \| DateRange \| null` |  |
| `onChange?` | `(v: Date \| DateRange) => void` |  |
| `today?` | `Date` |  |
| `min?` | `Date` |  |
| `max?` | `Date` |  |
| `month?` | `Date` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### DatePicker

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` |  |
| `range?` | `boolean` |  |
| `value?` | `Date \| DateRange \| null` |  |
| `defaultValue?` | `Date \| DateRange` |  |
| `onChange?` | `(v: Date \| DateRange \| null) => void` |  |
| `presets?` | `boolean` |  |
| `min?` | `Date` |  |
| `max?` | `Date` |  |
| `today?` | `Date` |  |
| `placeholder?` | `string` |  |
| `hint?` | `string` |  |
| `error?` | `string` |  |
| `required?` | `boolean` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |