Date picker

Overview

The date picker lives in @flatpay-dk/ui and exports two components: DatePicker for a single date and DateRangePicker for a range. Both share one input-height surface and three variants — button (the default), stepper, and typeable — picked by interaction, not by size. Range type drops the typeable variant.

Variants

Three variants picked by interaction. button is the default — a clickable trigger that opens the calendar popover and displays the current selection. stepper adds prev/next buttons on either side for sequentially scanning through dates or preset periods. typeable swaps the trigger for a text input that accepts dd/MM/yyyy directly — the right reach for known dates the user has memorised.

Types

One date, or two. The range type pairs start and end on the same trigger and on the popover above the calendar. Same-month ranges compress to a single month label — 8 – 18 Feb 2026 — so the chip stays short.

Stepper

Stepper buttons attach to either side of the trigger. On a single date they step by one day. On a range, they shift the entire window by its length — a 7-day window jumps a week back or forward.

States

Six visible states — empty, filled, hover, active (popover open), focus, disabled, error. Hover, active, and focus are CSS-driven; you get them for free on the live component. The matrix below holds empty, filled, disabled, and error still so they're reviewable side-by-side.

Single date

Range

Calendar popover

Open the trigger to land on the calendar. The grid runs Monday-first; today carries a 1 px ring; the selected date fills with charcoal. Range mode draws a 6 % black bar between endpoints so the eye can read the period at a glance. The footer commits the draft — Cancel reverts, Apply writes the value back.

Anatomy

The pieces of the trigger surface, shared across variants.

Behavior

The popover is not a modal. Click outside to dismiss; Esc dismisses and returns focus to the trigger. The grid is keyboard-first.

Accessibility

The trigger announces itself as a date control with aria-haspopup="dialog" and exposes the live value through aria-label. The day grid uses role="grid" with each cell as a button, marks today with aria-current="date", and pairs selection with aria-pressed. Day labels are spelled out in full for screen readers — “Friday, 8 February 2026” — so meaning never lives only in colour.

Code

Both pickers support controlled and uncontrolled value flows, and accept min / max bounds.

Live demo

Single date — controlled

import { useState } from "react";
import { DatePicker } from "@flatpay-dk/ui";

export function PayoutDate() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePicker
      label="Payout date"
      value={value}
      onValueChange={setValue}
      min={new Date()}
      helpText="Funds settle the next business day."
    />
  );
}

Typeable — for known dates

import { DatePicker } from "@flatpay-dk/ui";

export function DateOfBirth() {
  return (
    <DatePicker
      variant="typeable"
      label="Date of birth"
      max={new Date()}
      helpText="DD/MM/YYYY"
    />
  );
}

Range — uncontrolled with stepper (preset period)

import { DateRangePicker } from "@flatpay-dk/ui";

// Preset: this week
const today = new Date();
const monday = new Date(today);
monday.setDate(today.getDate() - ((today.getDay() + 6) % 7));
const sunday = new Date(monday);
sunday.setDate(monday.getDate() + 6);

export function WeeklyReportRange() {
  return (
    <DateRangePicker
      variant="stepper"
      label="This week"
      defaultValue={{ start: monday, end: sunday }}
      onValueChange={(range) => console.log(range)}
    />
  );
}

Custom format

import { DatePicker } from "@flatpay-dk/ui";

const isoFormat = (d: Date) => d.toISOString().slice(0, 10);

<DatePicker
  label="Date"
  defaultValue={new Date()}
  format={isoFormat}
/>;

Best practices

Pick the variant by interaction, not by mood. Use stepper only on single dates or preset periods. Reach for typeable when the user knows the date by heart. Let validation explain itself in words.

Props

DatePicker

DateRangePicker

Related