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="vt-p-3">
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<button>‹</button>
<span class="vt-text-sm vt-font-medium">February 2026</span>
<button>›</button>
</div>
<div class="vt-grid vt-grid-cols-7 vt-gap-0.5">
<div class="vt-calendar-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="vt-relative">
<button class="vt-flex vt-items-center vt-gap-2 vt-h-10 vt-w-full vt-rounded-lg vt-border vt-border-border-strong vt-bg-surfaces-surface vt-px-3">
<svg>...</svg>
<span class="vt-text-mains-quaternary">Pick a date</span>
</button>
<div class="vt-absolute vt-top-full vt-mt-2 vt-p-3 vt-bg-surfaces-surface vt-border vt-rounded-lg vt-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="vt-p-3">
<div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
<button>‹</button>
<span class="vt-text-sm vt-font-medium">February 2026</span>
<button>›</button>
</div>
<div class="vt-grid vt-grid-cols-7 vt-gap-0.5">
<div class="vt-calendar-day vt-range-start">10</div>
<div class="vt-calendar-day vt-range-middle">11</div>
<div class="vt-calendar-day vt-range-end">18</div>
</div>
<div class="vt-text-xs vt-text-mains-quaternary vt-text-center">Feb 10 — Feb 18, 2026</div>
</div>With Presets
Quick date range presets.
html
<div class="vt-max-w-xs vt-space-y-3">
<button class="vt-flex vt-items-center vt-gap-2 vt-h-10 vt-w-full vt-rounded-lg vt-border vt-border-border-strong vt-bg-surfaces-surface vt-px-3">
<svg>...</svg>
<span>Last 7 days</span>
</button>
<div class="vt-flex vt-flex-wrap vt-gap-2">
<button class="vt-h-8 vt-px-3 vt-rounded-lg vt-bg-surfaces-subtle">Today</button>
<button class="vt-h-8 vt-px-3 vt-rounded-lg vt-bg-info-primary vt-text-generic-white">Last 7 days</button>
<!-- ...more presets -->
</div>
</div>Guidelines
Choosing a date/range via calendar popover — pairs input with calendar grid.
Do
Don't
Do
12
13
14
15
16
17
18
Don't
API Reference
All CSS classes available for the DatePicker component.
| Class | Type | Description |
|---|---|---|
vt-calendar-day |
Base | Base class for a calendar day cell |
vt-calendar-weekday |
Base | Weekday header cell (Mo, Tu, ...) |
vt-outside |
Modifier | Days from adjacent months (dimmed) |
vt-today |
State | Highlights the current date |
vt-active |
State | Marks the selected date |
vt-range-start |
State | First day of a selected date range |
vt-range-middle |
State | Days between range start and end |
vt-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 |