Date Picker

A date selection input. Built on native <input type="date"> and <input type="datetime-local"> — the browser provides the calendar UI.

Component Skill — components/date-picker/component-skill.md

Native basis

<input type="date"> element with native browser date picker.

Web Platform APIs

<input type="date"> <input type="datetime-local">

Classes

.input .date-input

Notes

• Reuses the .input class — the native date picker provides the calendar UI.

• No custom calendar implementation needed — the browser handles it.

• The calendar popup is rendered by the OS/browser and cannot be styled.

• For a fully custom date picker, a custom calendar component would be needed.

Date

Native date picker.

Birthday

<input class="date-input" type="date" id="birthday">

Date and time

Meeting

<input class="date-input" type="datetime-local" id="meeting">

With constraints

Start date

<input class="date-input" type="date" min="2024-01-01" max="2026-12-31">

CSS view file

/* -- Date Picker component -------------------------------------- */
/* Uses the .input class with type="date" or type="datetime-local" */
/* This file adds date-specific overrides only.                     */

@layer components {
  .date-input {
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    cursor: pointer;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Style the calendar icon */
    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 150ms;

      &:hover { opacity: 1; }
    }
  }
}