Components

Date picker

A .ds-input that opens a flat .ds-calendar popover — a bordered surface holding a month label, prev / next icon buttons and a 7-column grid of square day cells. Faint outside-month days, an accent ring for today, an ink fill for the selection. No radius, no shadow.

Calendar

The open .ds-calendar surface: a __head with the month label between two .ds-button--icon steppers, then a __grid of faint __weekday labels over __day cells. .is-today draws an accent ring, .is-selected fills with ink, .is-outside fades neighbour days.

Open calendar

<div class="ds-calendar" role="dialog" aria-label="Choose date">
  <div class="ds-calendar__head">
    <button class="ds-button ds-button--icon ds-button--sm" aria-label="Previous month">…</button>
    <div class="ds-calendar__label">June 2026</div>
    <button class="ds-button ds-button--icon ds-button--sm" aria-label="Next month">…</button>
  </div>
  <div class="ds-calendar__grid" role="grid">
    <div class="ds-calendar__weekday">Su</div> … <div class="ds-calendar__weekday">Sa</div>
    <button class="ds-calendar__day is-outside">31</button>
    <button class="ds-calendar__day">1</button> …
    <button class="ds-calendar__day is-today">17</button>
    <button class="ds-calendar__day is-selected" aria-pressed="true">18</button> …
  </div>
</div>

Interactive

The input toggles the calendar; it closes on outside-click or Escape. Picking a day writes the ISO date into the field. The small inline script below wires this demo (no dependencies).

Input opens calendar

<div class="ds-datepicker">
  <input class="ds-input" type="text" readonly value="2026-06-18"
         aria-haspopup="dialog" aria-expanded="false">
  <div class="ds-calendar" role="dialog" hidden>
    <!-- __head + __grid as above -->
  </div>
</div>

React

The DatePicker renders a .ds-input that opens the calendar, computes the month grid with pure JS date math, navigates months and picks a day — closing on select, outside-click and Escape. Works controlled (value/onChange) or uncontrolled (defaultValue). value is a Date or ISO string; the input shows ISO yyyy-mm-dd by default.

import { DatePicker } from "@diametral/design-system/react";

<DatePicker
  defaultValue="2026-06-18"
  min="2026-01-01"
  max="2026-12-31"
  onChange={(date, iso) => console.log(iso, date)}
/>