Date Picker

<!-- Date Picker: Input + Popover Calendar -->
<div class="date-picker">
  <label for="date-input" id="date-label">Departure date</label>
  <div class="date-input-wrapper">
    <input
      type="text"
      id="date-input"
      placeholder="MM/DD/YYYY"
      aria-describedby="date-format"
      aria-haspopup="dialog"
      autocomplete="off"
    />
    <button
      type="button"
      class="calendar-toggle"
      aria-label="Open calendar"
      aria-expanded="false"
      aria-controls="calendar-dialog"
    >
      <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h1.25A1.75 1.75 0 0 1 18 5.75v10.5A1.75 1.75 0 0 1 16.25 18H3.75A1.75 1.75 0 0 1 2 16.25V5.75A1.75 1.75 0 0 1 3.75 4H5V2.75A.75.75 0 0 1 5.75 2ZM5 5.5H3.75a.25.25 0 0 0-.25.25V8h13V5.75a.25.25 0 0 0-.25-.25H5Zm11.5 4h-13v6.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V9.5Z"/>
      </svg>
    </button>
    <span id="date-format" class="helper-text">Format: MM/DD/YYYY</span>
  </div>

  <!-- Calendar Dialog -->
  <div
    id="calendar-dialog"
    role="dialog"
    aria-label="Choose departure date"
    aria-modal="true"
    class="calendar-popover"
    hidden
  >
    <div class="calendar-header">
      <button type="button" aria-label="Previous month">◀</button>
      <span aria-live="polite" class="calendar-title">March 2026</span>
      <button type="button" aria-label="Next month">▶</button>
    </div>

    <table role="grid" aria-label="March 2026">
      <thead>
        <tr>
          <th scope="col" abbr="Sunday">Su</th>
          <th scope="col" abbr="Monday">Mo</th>
          <th scope="col" abbr="Tuesday">Tu</th>
          <th scope="col" abbr="Wednesday">We</th>
          <th scope="col" abbr="Thursday">Th</th>
          <th scope="col" abbr="Friday">Fr</th>
          <th scope="col" abbr="Saturday">Sa</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><button type="button" tabindex="-1" aria-disabled="true" class="date-cell adjacent">22</button></td>
          <td><button type="button" tabindex="-1" aria-disabled="true" class="date-cell adjacent">23</button></td>
          <!-- ... more cells ... -->
          <td><button type="button" tabindex="0" aria-current="date" class="date-cell today">8</button></td>
          <!-- ... more cells ... -->
        </tr>
      </tbody>
    </table>
  </div>
</div>

import { useState, useRef, useEffect, useMemo } from "react";

interface DatePickerProps {
  value?: Date | null;
  onChange?: (date: Date | null) => void;
  label: string;
  placeholder?: string;
  minDate?: Date;
  maxDate?: Date;
  disabledDates?: (date: Date) => boolean;
  locale?: string;
  error?: string;
}

export default function DatePicker({
  value = null,
  onChange,
  label,
  placeholder = "MM/DD/YYYY",
  minDate,
  maxDate,
  disabledDates,
  locale = "en-US",
  error,
}: DatePickerProps) {
  const [open, setOpen] = useState(false);
  const [viewDate, setViewDate] = useState(value || new Date());
  const [focusDate, setFocusDate] = useState(value || new Date());
  const inputRef = useRef<HTMLInputElement>(null);
  const calendarRef = useRef<HTMLDivElement>(null);

  const daysInMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0).getDate();
  const firstDay = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1).getDay();

  const monthLabel = viewDate.toLocaleDateString(locale, { month: "long", year: "numeric" });

  const isDisabled = (date: Date) => {
    if (minDate && date < minDate) return true;
    if (maxDate && date > maxDate) return true;
    if (disabledDates?.(date)) return true;
    return false;
  };

  const selectDate = (day: number) => {
    const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
    if (isDisabled(date)) return;
    onChange?.(date);
    setOpen(false);
    inputRef.current?.focus();
  };

  const handleKeyDown = (e: React.KeyboardEvent, day: number) => {
    const current = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
    let next = new Date(current);

    switch (e.key) {
      case "ArrowRight": next.setDate(next.getDate() + 1); break;
      case "ArrowLeft": next.setDate(next.getDate() - 1); break;
      case "ArrowDown": next.setDate(next.getDate() + 7); break;
      case "ArrowUp": next.setDate(next.getDate() - 7); break;
      case "Enter":
      case " ": e.preventDefault(); selectDate(day); return;
      case "Escape": setOpen(false); inputRef.current?.focus(); return;
      default: return;
    }
    e.preventDefault();
    setFocusDate(next);
    if (next.getMonth() !== viewDate.getMonth()) setViewDate(next);
  };

  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const isToday = (day: number) => {
    const now = new Date();
    return day === now.getDate()
      && viewDate.getMonth() === now.getMonth()
      && viewDate.getFullYear() === now.getFullYear();
  };

  return (
    <div className="date-picker">
      <label htmlFor="date-input">{label}</label>
      <div className="date-input-wrapper">
        <input
          ref={inputRef}
          id="date-input"
          type="text"
          placeholder={placeholder}
          value={value?.toLocaleDateString(locale) ?? ""}
          aria-invalid={!!error || undefined}
          aria-haspopup="dialog"
          readOnly
          onClick={() => setOpen(!open)}
        />
      </div>
      {error && <span className="error-text" role="alert">{error}</span>}

      {open && (
        <div ref={calendarRef} role="dialog" aria-label={`Choose ${label}`} aria-modal="true" className="calendar-popover">
          <div className="calendar-header">
            <button type="button" aria-label="Previous month" onClick={() => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1))}>◀</button>
            <span aria-live="polite">{monthLabel}</span>
            <button type="button" aria-label="Next month" onClick={() => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1))}>▶</button>
          </div>

          <table role="grid" aria-label={monthLabel}>
            <thead>
              <tr>{["Su","Mo","Tu","We","Th","Fr","Sa"].map(d => <th key={d} scope="col">{d}</th>)}</tr>
            </thead>
            <tbody>
              {Array.from({ length: Math.ceil(cells.length / 7) }, (_, row) => (
                <tr key={row}>
                  {cells.slice(row * 7, row * 7 + 7).map((day, i) => (
                    <td key={i}>
                      {day && (
                        <button
                          type="button"
                          className={`date-cell ${isToday(day) ? "today" : ""}`}
                          tabIndex={focusDate.getDate() === day ? 0 : -1}
                          aria-selected={value?.getDate() === day && value?.getMonth() === viewDate.getMonth()}
                          aria-current={isToday(day) ? "date" : undefined}
                          aria-disabled={isDisabled(new Date(viewDate.getFullYear(), viewDate.getMonth(), day)) || undefined}
                          onClick={() => selectDate(day)}
                          onKeyDown={(e) => handleKeyDown(e, day)}
                        >
                          {day}
                        </button>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}