Skip to content
DOL Studio

DatePicker

Design: Stable Code: Coded formdaterange 11 Figma sets 5 standalone date-picker

Live preview

Default — empty (placeholder)

empty state · placeholder visible

Pre-selected — May 15, 2026

pre-filled value · formatted DD/MM/YYYY

English locale

locale="en" · format MM/DD/YYYY

Sizes

4 sizes — xs (28px) / sm (32px) / md (40px default) / lg (48px). Padding + font scale together. Auto-fit grid: cellMinWidth=220px (DatePicker placeholder shorter than Input).
inputSize="xs"
inputSize="sm"
inputSize="md"
inputSize="lg"

Min / max bounds

Only allows 2026 dates · min + max bound the picker

States

2 disabled-axis states — `invalid` (red ring + danger tone) / `disabled` (slate, no interaction). Auto-fit grid: cellMinWidth=240px.
state="invalid"
state="disabled"

Import & files

Import
import { DatePicker } from "@dol/ui/datepicker";
Source file
packages/@dol/ui/src/datepicker/DatePicker.tsx

Figma source

Figma source 11 sets
Page
DatePicker
Sets
11 + 5 standalone
Primary set
date-picker · 30 variants Open in Figma →
Showing: date-picker
10 other sets
  • Date picker 3 variants Figma →
  • Date picker/Grey style/Date range (New) 11 variants Figma →
  • Date picker/Grey style/Month range 7 variants Figma →
  • Date picker/Grey style/Single Date (New) 12 variants Figma →
  • Date picker/Light style/Date range (New) 11 variants Figma →
  • Date picker/Multi mode 4 variants Figma →
  • Date picker/Quick select 3 variants Figma →
  • Date picker/Title button 2 variants Figma →
  • Date picker/Title button (new) 2 variants Figma →
  • Quater picker 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# DatePicker
Slug: `datepicker`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Single-date + date-range picker with advanced filters, presets, and inline calendar grids.


## Import
```ts
import { DatePicker } from "@dol/ui/datepicker";
```
Source: `packages/@dol/ui/src/datepicker/DatePicker.tsx`


## Figma source
Page: DatePicker
Sets: 11
Primary: date-picker
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=2310-1751

Related

  • Slider

    Coded

  • Input

    Coded

  • Select input

    Coded

  • Uploader

    Coded
  • Label

    Checkbox

    Coded
  • Active

    Chip

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).