Skip to content
Atomus

Date picker

A date field with a calendar; single dates or ranges.

October 2026
MoTuWeThFrSaSu
Date pickerLive · light and dark follow the theme switch

Usage

Section titled “Usage”
import { DatePicker, Calendar } from '@stanvision/atomus-react';


<DatePicker label="Due date" value={date} onChange={setDate} />
<Calendar type="range" range={range} onRangeChange={setRange} />

A date field that opens a calendar. Calendar is exported on its own for inline use.

Provide

Section titled “Provide”
  • type single (with value / onChange) or range (with range / onRangeChange); dates are ISO strings like 2026-10-14.
  • label, hint, error, placeholder, min, max, weekStartsOn (Monday by default), locale.
  • Keyboard: arrow keys move by day and week, PageUp / PageDown by month, Enter picks, Esc closes.

Don’t

Section titled “Don’t”
  • Don’t use for birthdays or dates far away — a typed Date input is faster.

In Figma

Section titled “In Figma”

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.