DatePicker

A date picker component with calendar view.

Calendar

Inline calendar view.

html
February 2026
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
<div class="uc-p-3">
  <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
    <button>‹</button>
    <span class="uc-text-sm uc-font-medium">February 2026</span>
    <button>›</button>
  </div>
  <div class="uc-grid uc-grid-cols-7 uc-gap-0.5">
    <div class="cal-day">1</div>
    <!-- ...more days -->
  </div>
</div>

With Trigger

Date picker triggered by a button.

html
February 2026
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
<div class="uc-relative">
  <button class="uc-flex uc-items-center uc-gap-2 uc-h-10 uc-w-full uc-rounded-lg uc-border uc-border-border-strong uc-bg-neutrals-surface uc-px-3">
    <svg>...</svg>
    <span class="uc-text-fg-disabled">Pick a date</span>
  </button>
  <div class="uc-absolute uc-top-full uc-mt-2 uc-p-3 uc-bg-neutrals-surface uc-border uc-rounded-lg uc-shadow-lg">
    <!-- calendar content -->
  </div>
</div>

Date Range

Selecting a range of dates.

html
February 2026
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
Feb 10 — Feb 18, 2026 
<div class="uc-p-3">
  <div class="uc-flex uc-items-center uc-justify-between uc-mb-4">
    <button>‹</button>
    <span class="uc-text-sm uc-font-medium">February 2026</span>
    <button>›</button>
  </div>
  <div class="uc-grid uc-grid-cols-7 uc-gap-0.5">
    <div class="cal-day range-start">10</div>
    <div class="cal-day range-middle">11</div>
    <div class="cal-day range-end">18</div>
  </div>
  <div class="uc-text-xs uc-text-fg-disabled uc-text-center">Feb 10 — Feb 18, 2026</div>
</div>

With Presets

Quick date range presets.

html 
<div class="uc-max-w-xs uc-space-y-3">
  <button class="uc-flex uc-items-center uc-gap-2 uc-h-10 uc-w-full uc-rounded-lg uc-border uc-border-border-strong uc-bg-neutrals-surface uc-px-3">
    <svg>...</svg>
    <span>Last 7 days</span>
  </button>
  <div class="uc-flex uc-flex-wrap uc-gap-2">
    <button class="uc-h-8 uc-px-3 uc-rounded-lg uc-bg-neutrals-subtle">Today</button>
    <button class="uc-h-8 uc-px-3 uc-rounded-lg uc-bg-accents-blue uc-text-constant-white">Last 7 days</button>
    <!-- ...more presets -->
  </div>
</div>

API Reference

All CSS classes available for the DatePicker component.

Class Type Description
cal-day Base Base class for a calendar day cell
outside Modifier Days from adjacent months (dimmed)
today State Highlights the current date
selected State Marks the selected date
range-start State First day of a selected date range
range-middle State Days between range start and end
range-end State Last day of a selected date range

Accessibility

Keyboard and screen reader support.

Feature Details
Label Input should have a visible label or aria-label describing the date field
Keyboard Arrow keys navigate calendar, Enter selects date, Escape closes popup
Format Announce selected date in a human-readable format to screen readers
Calendar Calendar grid uses role="grid" with proper aria-selected on chosen date