v1.1.1

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 vt-inline-89abf09ba1" data-calendar="single">
  <!-- Header -->
  <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
    <button class="vt-inline-flex vt-items-center vt-justify-center vt-w-8 vt-h-8 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
        <path d="m15 18-6-6 6-6"></path>
      </svg>
    </button>
    <span class="vt-text-sm vt-font-medium">February 2026</span>
    <button class="vt-inline-flex vt-items-center vt-justify-center vt-w-8 vt-h-8 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
  </div>

  <!-- Week days -->
  <div class="vt-grid vt-grid-cols-7 vt-mb-1">
    <div class="vt-calendar-weekday">Mo</div>
    <div class="vt-calendar-weekday">Tu</div>
    <div class="vt-calendar-weekday">We</div>
    <div class="vt-calendar-weekday">Th</div>
    <div class="vt-calendar-weekday">Fr</div>
    <div class="vt-calendar-weekday">Sa</div>
    <div class="vt-calendar-weekday">Su</div>
  </div>

  <!-- Days -->
  <div class="vt-grid vt-grid-cols-7 vt-gap-0.5">
    <div class="vt-calendar-day vt-outside">26</div>
    <div class="vt-calendar-day vt-outside">27</div>
    <div class="vt-calendar-day vt-outside">28</div>
    <div class="vt-calendar-day vt-outside">29</div>
    <div class="vt-calendar-day vt-outside">30</div>
    <div class="vt-calendar-day vt-outside">31</div>
    <div class="vt-calendar-day">1</div>
    <div class="vt-calendar-day">2</div>
    <div class="vt-calendar-day">3</div>
    <div class="vt-calendar-day">4</div>
    <div class="vt-calendar-day">5</div>
    <div class="vt-calendar-day">6</div>
    <div class="vt-calendar-day">7</div>
    <div class="vt-calendar-day">8</div>
    <div class="vt-calendar-day">9</div>
    <div class="vt-calendar-day">10</div>
    <div class="vt-calendar-day">11</div>
    <div class="vt-calendar-day">12</div>
    <div class="vt-calendar-day">13</div>
    <div class="vt-calendar-day vt-today">14</div>
    <div class="vt-calendar-day vt-active">15</div>
    <div class="vt-calendar-day">16</div>
    <div class="vt-calendar-day">17</div>
    <div class="vt-calendar-day">18</div>
    <div class="vt-calendar-day">19</div>
    <div class="vt-calendar-day">20</div>
    <div class="vt-calendar-day">21</div>
    <div class="vt-calendar-day">22</div>
    <div class="vt-calendar-day">23</div>
    <div class="vt-calendar-day">24</div>
    <div class="vt-calendar-day">25</div>
    <div class="vt-calendar-day">26</div>
    <div class="vt-calendar-day">27</div>
    <div class="vt-calendar-day">28</div>
    <div class="vt-calendar-day vt-outside">1</div>
    <div class="vt-calendar-day vt-outside">2</div>
    <div class="vt-calendar-day vt-outside">3</div>
    <div class="vt-calendar-day vt-outside">4</div>
    <div class="vt-calendar-day vt-outside">5</div>
    <div class="vt-calendar-day vt-outside">6</div>
    <div class="vt-calendar-day vt-outside">7</div>
    <div class="vt-calendar-day vt-outside">8</div>
  </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 id="datepicker-btn" onclick="document.getElementById('datepicker-cal').classList.toggle('vt-hidden')" class="vt-input vt-items-center vt-gap-2 vt-hover:bg-surface-subtle vt-text-left">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-calendar vt-w-4 vt-h-4 vt-text-foreground-muted">
      <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>
    </svg>
    <span class="vt-text-foreground-muted">Pick a date</span>
  </button>
  <div id="datepicker-cal" data-calendar="single" class="vt-hidden vt-absolute vt-top-full vt-left-0 vt-mt-2 vt-p-3 vt-bg-surface-card vt-border vt-border-border-default vt-rounded-lg vt-shadow-lg vt-z-50 vt-inline-89abf09ba1">
    <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
      <button class="vt-inline-flex vt-items-center vt-justify-center vt-w-8 vt-h-8 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
          <path d="m15 18-6-6 6-6"></path>
        </svg>
      </button>
      <span class="vt-text-sm vt-font-medium">February 2026</span>
      <button class="vt-inline-flex vt-items-center vt-justify-center vt-w-8 vt-h-8 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </button>
    </div>
    <div class="vt-grid vt-grid-cols-7 vt-mb-1">
      <div class="vt-calendar-weekday">Mo</div>
      <div class="vt-calendar-weekday">Tu</div>
      <div class="vt-calendar-weekday">We</div>
      <div class="vt-calendar-weekday">Th</div>
      <div class="vt-calendar-weekday">Fr</div>
      <div class="vt-calendar-weekday">Sa</div>
      <div class="vt-calendar-weekday">Su</div>
    </div>
    <div class="vt-grid vt-grid-cols-7 vt-gap-0.5">
      <div class="vt-calendar-day vt-outside">26</div><div class="vt-calendar-day vt-outside">27</div><div class="vt-calendar-day vt-outside">28</div><div class="vt-calendar-day vt-outside">29</div><div class="vt-calendar-day vt-outside">30</div><div class="vt-calendar-day vt-outside">31</div><div class="vt-calendar-day">1</div>
      <div class="vt-calendar-day">2</div><div class="vt-calendar-day">3</div><div class="vt-calendar-day">4</div><div class="vt-calendar-day">5</div><div class="vt-calendar-day">6</div><div class="vt-calendar-day">7</div><div class="vt-calendar-day">8</div>
      <div class="vt-calendar-day">9</div><div class="vt-calendar-day">10</div><div class="vt-calendar-day">11</div><div class="vt-calendar-day">12</div><div class="vt-calendar-day">13</div><div class="vt-calendar-day vt-today">14</div><div class="vt-calendar-day">15</div>
      <div class="vt-calendar-day">16</div><div class="vt-calendar-day">17</div><div class="vt-calendar-day">18</div><div class="vt-calendar-day">19</div><div class="vt-calendar-day">20</div><div class="vt-calendar-day">21</div><div class="vt-calendar-day">22</div>
      <div class="vt-calendar-day">23</div><div class="vt-calendar-day">24</div><div class="vt-calendar-day">25</div><div class="vt-calendar-day">26</div><div class="vt-calendar-day">27</div><div class="vt-calendar-day">28</div><div class="vt-calendar-day vt-outside">1</div>
    </div>
  </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 vt-inline-89abf09ba1" data-calendar="range">
  <div class="vt-flex vt-items-center vt-justify-between vt-mb-4">
    <button class="vt-inline-flex vt-items-center vt-justify-center vt-w-8 vt-h-8 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
        <path d="m15 18-6-6 6-6"></path>
      </svg>
    </button>
    <span class="vt-text-sm vt-font-medium">February 2026</span>
    <button class="vt-inline-flex vt-items-center vt-justify-center vt-w-8 vt-h-8 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
  </div>
  <div class="vt-grid vt-grid-cols-7 vt-mb-1">
    <div class="vt-calendar-weekday">Mo</div>
    <div class="vt-calendar-weekday">Tu</div>
    <div class="vt-calendar-weekday">We</div>
    <div class="vt-calendar-weekday">Th</div>
    <div class="vt-calendar-weekday">Fr</div>
    <div class="vt-calendar-weekday">Sa</div>
    <div class="vt-calendar-weekday">Su</div>
  </div>
  <div class="vt-grid vt-grid-cols-7 vt-gap-0.5">
    <div class="vt-calendar-day vt-outside">26</div><div class="vt-calendar-day vt-outside">27</div><div class="vt-calendar-day vt-outside">28</div><div class="vt-calendar-day vt-outside">29</div><div class="vt-calendar-day vt-outside">30</div><div class="vt-calendar-day vt-outside">31</div><div class="vt-calendar-day">1</div>
    <div class="vt-calendar-day">2</div><div class="vt-calendar-day">3</div><div class="vt-calendar-day">4</div><div class="vt-calendar-day">5</div><div class="vt-calendar-day">6</div><div class="vt-calendar-day">7</div><div class="vt-calendar-day">8</div>
    <div class="vt-calendar-day">9</div><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-middle">12</div><div class="vt-calendar-day vt-range-middle">13</div><div class="vt-calendar-day vt-range-middle today">14</div><div class="vt-calendar-day vt-range-middle">15</div>
    <div class="vt-calendar-day vt-range-middle">16</div><div class="vt-calendar-day vt-range-middle">17</div><div class="vt-calendar-day vt-range-end">18</div><div class="vt-calendar-day">19</div><div class="vt-calendar-day">20</div><div class="vt-calendar-day">21</div><div class="vt-calendar-day">22</div>
    <div class="vt-calendar-day">23</div><div class="vt-calendar-day">24</div><div class="vt-calendar-day">25</div><div class="vt-calendar-day">26</div><div class="vt-calendar-day">27</div><div class="vt-calendar-day">28</div><div class="vt-calendar-day vt-outside">1</div>
  </div>
</div>
<div class="vt-px-3 vt-pb-2 vt-pt-1 vt-text-xs vt-text-foreground-muted vt-text-center">
  Feb 10 — Feb 18, 2026
</div>

With Presets

Quick date range presets.

html 
<button class="vt-input vt-items-center vt-gap-2 vt-text-left vt-hover:bg-surface-subtle">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-calendar vt-w-4 vt-h-4 vt-text-foreground-muted">
    <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>
  </svg>
  <span>Last 7 days</span>
</button>
<div class="vt-flex vt-flex-wrap vt-gap-2">
  <button onclick="this.parentElement.querySelectorAll('button').forEach(function(b){b.classList.remove('vt-bg-info-fill','vt-text-generic-white');b.classList.add('vt-bg-surface-subtle','vt-text-foreground-primary')}); this.classList.remove('vt-bg-surface-subtle','vt-text-foreground-primary'); this.classList.add('vt-bg-info-fill','vt-text-generic-white'); this.parentElement.previousElementSibling.querySelector('span').textContent = this.textContent" class="vt-btn vt-btn-sm vt-h-8 vt-bg-surface-subtle vt-text-foreground-primary vt-hover:bg-surface-subtle/80">Today</button>
  <button onclick="this.parentElement.querySelectorAll('button').forEach(function(b){b.classList.remove('vt-bg-info-fill','vt-text-generic-white');b.classList.add('vt-bg-surface-subtle','vt-text-foreground-primary')}); this.classList.remove('vt-bg-surface-subtle','vt-text-foreground-primary'); this.classList.add('vt-bg-info-fill','vt-text-generic-white'); this.parentElement.previousElementSibling.querySelector('span').textContent = this.textContent" class="vt-btn vt-btn-sm vt-h-8 vt-bg-surface-subtle vt-text-foreground-primary vt-hover:bg-surface-subtle/80">Yesterday</button>
  <button onclick="this.parentElement.querySelectorAll('button').forEach(function(b){b.classList.remove('vt-bg-info-fill','vt-text-generic-white');b.classList.add('vt-bg-surface-subtle','vt-text-foreground-primary')}); this.classList.remove('vt-bg-surface-subtle','vt-text-foreground-primary'); this.classList.add('vt-bg-info-fill','vt-text-generic-white'); this.parentElement.previousElementSibling.querySelector('span').textContent = this.textContent" class="vt-btn vt-btn-sm vt-h-8 vt-bg-info-fill vt-text-generic-white">Last 7 days</button>
  <button onclick="this.parentElement.querySelectorAll('button').forEach(function(b){b.classList.remove('vt-bg-info-fill','vt-text-generic-white');b.classList.add('vt-bg-surface-subtle','vt-text-foreground-primary')}); this.classList.remove('vt-bg-surface-subtle','vt-text-foreground-primary'); this.classList.add('vt-bg-info-fill','vt-text-generic-white'); this.parentElement.previousElementSibling.querySelector('span').textContent = this.textContent" class="vt-btn vt-btn-sm vt-h-8 vt-bg-surface-subtle vt-text-foreground-primary vt-hover:bg-surface-subtle/80">Last 30 days</button>
  <button onclick="this.parentElement.querySelectorAll('button').forEach(function(b){b.classList.remove('vt-bg-info-fill','vt-text-generic-white');b.classList.add('vt-bg-surface-subtle','vt-text-foreground-primary')}); this.classList.remove('vt-bg-surface-subtle','vt-text-foreground-primary'); this.classList.add('vt-bg-info-fill','vt-text-generic-white'); this.parentElement.previousElementSibling.querySelector('span').textContent = this.textContent" class="vt-btn vt-btn-sm vt-h-8 vt-bg-surface-subtle vt-text-foreground-primary vt-hover:bg-surface-subtle/80">This month</button>
  <button onclick="this.parentElement.querySelectorAll('button').forEach(function(b){b.classList.remove('vt-bg-info-fill','vt-text-generic-white');b.classList.add('vt-bg-surface-subtle','vt-text-foreground-primary')}); this.classList.remove('vt-bg-surface-subtle','vt-text-foreground-primary'); this.classList.add('vt-bg-info-fill','vt-text-generic-white'); this.parentElement.previousElementSibling.querySelector('span').textContent = this.textContent" class="vt-btn vt-btn-sm vt-h-8 vt-bg-surface-subtle vt-text-foreground-primary vt-hover:bg-surface-subtle/80">This year</button>
</div>

Guidelines

Choosing a date/range via calendar popover — pairs input with calendar grid.

Do
Show a calendar icon so the date affordance is obvious.
Don't
Don't drop the calendar icon — the date affordance disappears.
Do
Offer quick presets for the ranges people pick most.
12
13
14
15
16
17
18
Don't
Don't highlight two conflicting days as selected.

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
Built with:
Input Button Icons