Components

Date-time picker

A date picker beside a time picker. The .ds-datetime wrapper sits a .ds-datepicker next to a .ds-timepicker with a consistent gap; together they compose a single ISO datetime string YYYY-MM-DDTHH:MM. Each half owns its own field and popover — no new popover styling here.

Anatomy

A .ds-datetime flex row holds the two controls. The left field opens a flat .ds-calendar; the right opens a two-column .ds-timepicker__popover. Both popovers sit at --ds-z-popover and reuse their own component styles.

Date + time fields

<div class="ds-datetime">
  <div class="ds-datepicker">
    <input class="ds-input" type="text" readonly value="2026-06-18" aria-haspopup="dialog">
  </div>
  <div class="ds-timepicker">
    <input class="ds-input" type="text" value="09:30" aria-haspopup="dialog">
  </div>
</div>

Interactive

The date field opens a calendar; the time field opens the two-column popover. Picking a day and a time composes YYYY-MM-DDTHH:MM — shown live below the row. Both close on outside-click or Escape. The small inline script below wires this demo (no dependencies).

Date + time → ISO

Value: 2026-06-18T09:30

<div class="ds-datetime">
  <div class="ds-datepicker">
    <input class="ds-input" type="text" readonly value="2026-06-18" aria-haspopup="dialog">
    <div class="ds-calendar" role="dialog" hidden><!-- __head + __grid --></div>
  </div>
  <div class="ds-timepicker">
    <input class="ds-input" type="text" value="09:30" aria-haspopup="dialog">
    <div class="ds-timepicker__popover" role="dialog" hidden><!-- two cols --></div>
  </div>
</div>
<!-- combines to 2026-06-18T09:30 -->

React

The DateTimePicker composes DatePicker and TimePicker side by side and combines their halves into an ISO "YYYY-MM-DDTHH:MM" string passed to onChange. Works controlled (value/onChange) or uncontrolled (defaultValue); min / max bound the calendar and step drives the minutes column.

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

<DateTimePicker
  defaultValue="2026-06-18T09:30"
  min="2026-01-01"
  max="2026-12-31"
  step={15}
  onChange={(value) => setWhen(value)}
/>