Date Picker Component

Interactive calendar dropdown for date selection. Built following DESIGN.md form specifications.

DESIGN.md Specifications

Following the form input patterns from DESIGN.md:

Background: #f2f2f3 (N10)
Border: 1px solid #dfdfe2 (border-light)
Border radius: 8px (radius-sm)
Height: 40px (default), 48px (large)
Font: 16px / 400 for input text
Focus state: 2px border in #5746b2 (P100)
Error state: 2px border in #eb2000 (R120)
Disabled: background #fafafa (N5), text #b0afb6 (N40)
Calendar dropdown: box-shadow: 0 4px 16px 0 rgba(32, 31, 35, 0.10)

Default Date Picker

Start date *

calendar_today

Su

Mo

Tu

We

Th

Fr

Sa

Select a start date for your project

<div class="elv-date-picker">
  <input
    type="text"
    class="elv-date-picker__input"
    placeholder="MM/DD/YYYY"
    readonly
    aria-label="Start date"
  >
  <span class="material-symbols-outlined elv-date-picker__icon">calendar_today</span>
  <div class="elv-date-picker__calendar">
    <!-- Calendar UI -->
  </div>
</div>

Focus State

Event date

calendar_today

2px purple border on focus

Error State

Deadline *

calendar_today

error Deadline is required

Disabled State

Contract date

calendar_today

Date cannot be changed

Large Size

Launch date

calendar_today

48px height for mobile-friendly touch targets

Date Range Picker

Report period

calendar_today

to

calendar_today

Su

Mo

Tu

We

Th

Fr

Sa

Select a date range for the report

<div class="elv-date-picker elv-date-picker--range">
  <div class="elv-date-picker__range-inputs">
    <div class="elv-date-picker">
      <input class="elv-date-picker__input" placeholder="Start date" readonly>
      <span class="material-symbols-outlined elv-date-picker__icon">calendar_today</span>
    </div>
    <span class="elv-date-picker__range-separator">to</span>
    <div class="elv-date-picker">
      <input class="elv-date-picker__input" placeholder="End date" readonly>
      <span class="material-symbols-outlined elv-date-picker__icon">calendar_today</span>
    </div>
  </div>
</div>

Calendar States

Click the input to see interactive calendar:

Demo calendar

calendar_today

Su

Mo

Tu

We

Th

Fr

Sa

States: today (purple border), selected (purple bg), hover (gray bg), disabled (light gray text)

Keyboard Navigation

Arrow keys: Navigate between dates
Enter: Select focused date
Escape: Close calendar
Tab: Move between navigation buttons
Space: Activate buttons

Implementation Notes

Calendar dropdown uses floating element pattern with 4px gap from input
Days grid is 7 columns (Sunday to Saturday)
Today indicator uses purple border
Selected date uses purple background
Range selection highlights intermediate dates with P20 background
Other month dates shown in light gray (N40)
Disabled dates shown in very light gray (border-light)
Click outside to close calendar (not implemented in this static demo)
Input is readonly to prevent manual entry, ensuring valid dates only