For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/date-picker.md.
A3S UI
  • English
  • next

      • Date Picker

      Collects one calendar date through the native input, preserving the browser, locale, and mobile platform selection experience.

      Release window

      Local calendar day only. Allowed range is 2024-01-01 through 2028-12-31, including leap days.

      Ready to confirm the release window.

      Availability

      Locked by release policy. The native control stays disabled.

      Visible for audit. The value remains part of form submission while editing is blocked.

      Usage

      <label for="target-date">Target date</label>
<input
  id="target-date"
  class="input date-picker"
  type="date"
  value="2026-08-14"
  min="2024-01-01"
  max="2028-12-31"
  required
/>

      Prefer a visible label, min / max as local calendar bounds, and field-level recovery copy. Do not reinterpret the value as UTC.

      Contract

      SurfaceValue
      Root selectorinput.date-picker
      Native root<input type="date">
      Statesready, disabled, invalid, read-only
      Eventschange, input
      Methods—

      Product boundary

      It does not own time zones, date ranges, recurrence, or natural-language parsing. A form composition validates and explains relationships between multiple dates.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Always provide a visible label and explain format, bounds, and errors beside the field. A placeholder is never the label. Disabled and read-only use native attributes, not aria-disabled / aria-readonly alone.