Date input ✦Documentation has not yet been reviewed by a human.

<!-- `.calendar` scopes this example. Use an application selector instead. -->
<div class="calendar" style="display: inline-flex; flex-direction: column; gap: 6px">
  <div style="display: flex; align-items: center">
    <a-button role="button" tabindex="0" priority="tertiary" data-prev aria-label="Previous month"><a-icon shape="chevron-left" aria-hidden="true"></a-icon></a-button>
    <span data-heading style="flex: 1; text-align: center"></span>
    <a-button role="button" tabindex="0" priority="tertiary" data-next aria-label="Next month"><a-icon shape="chevron-right" aria-hidden="true"></a-icon></a-button>
  </div>
  <a-calendar role="group" name="date"></a-calendar>
</div>
<script type="module">
  import '@antadesign/anta/elements'
  import { buildMonth, parseISODate } from '@antadesign/anta'
  import { Temporal } from 'temporal-polyfill'

  const root = document.querySelector('.calendar')
  const grid = root.querySelector('a-calendar')
  const heading = root.querySelector('[data-heading]')
  let cursor = Temporal.Now.plainDateISO()
  grid.value = cursor.toString()

  function focusDate(iso) {
    grid.querySelector(`[data-date="${iso}"]`)?.focus()
  }

  function render() {
    const month = buildMonth({
      anchor: cursor,
      locale: navigator.language,
      selected: parseISODate(grid.value),
    })
    heading.textContent = month.heading
    grid.setAttribute('aria-label', month.heading)
    grid.replaceChildren()
    for (const weekday of month.weekdays) {
      const label = Object.assign(document.createElement('span'), { textContent: weekday.narrow })
      label.setAttribute('data-part', 'weekday')
      label.setAttribute('aria-hidden', 'true')
      grid.append(label)
    }
    for (const day of month.weeks.flat()) {
      const button = document.createElement('a-button')
      const label = Object.assign(document.createElement('a-button-label'), { textContent: String(day.day) })
      button.append(label)
      button.setAttribute('role', 'button')
      button.setAttribute('priority', day.today && !day.selected ? 'secondary' : 'tertiary')
      button.setAttribute('data-part', 'day-cell')
      button.setAttribute('data-date', day.iso)
      button.setAttribute('aria-label', day.label)
      button.setAttribute('aria-pressed', String(day.selected))
      button.tabIndex = day.iso === cursor.toString() ? 0 : -1
      if (day.selected) {
        button.setAttribute('selected', '')
        button.setAttribute('tone', 'brand')
      }
      if (day.disabled) button.setAttribute('disabled', '')
      if (day.today) {
        button.setAttribute('data-today', '')
        button.setAttribute('aria-current', 'date')
      }
      if (day.outside) button.setAttribute('data-outside', '')
      grid.append(button)
    }
  }

  root.querySelector('[data-prev]').addEventListener('click', () => {
    cursor = cursor.subtract({ months: 1 })
    render()
  })
  root.querySelector('[data-next]').addEventListener('click', () => {
    cursor = cursor.add({ months: 1 })
    render()
  })
  grid.addEventListener('statechange', (event) => {
    grid.value = event.detail.next ?? ''
    cursor = parseISODate(grid.value) ?? cursor
    render()
    focusDate(cursor.toString())
  })
  grid.addEventListener('navigate', (event) => {
    cursor = parseISODate(event.detail.date) ?? cursor
    render()
    focusDate(cursor.toString())
  })
  render()
</script>

<!-- `data-anta` styles the field, not the native picker. -->
<input data-anta type="date" name="due-date" value="2026-06-15">
<input data-anta type="datetime-local" name="starts-at" value="2026-06-15T09:00">
<input data-anta type="month" name="billing-month" value="2026-06">
<input data-anta type="time" name="reminder-at" value="09:00">
<input data-anta type="week" name="sprint-week" value="2026-W25">

/* Bigger, circular day cells. `className` lands on the outer .anta-calendar
   shell; `--calendar-cell-width` / `--calendar-cell-height` drive the grid track
   and the cell box (inherited down), and you target the day Buttons directly. */
.anta-calendar.roomy { --calendar-cell-width: 40px; --calendar-cell-height: 40px; }
.anta-calendar.roomy a-button[data-part="day-cell"] { border-radius: 50%; }

/* Day cells are `<a-button data-part="day-cell" data-date="YYYY-MM-DD">`. Give them a
   positioning context, dot event days with a `::after`, and tint a date's text. */
.anta-calendar.events a-button[data-part="day-cell"] { position: relative; }
.anta-calendar.events a-button[data-part="day-cell"]:is(
  [data-date="2026-06-05"], [data-date="2026-06-12"], [data-date="2026-06-20"]
)::after {
  content: ""; position: absolute; inset-block-end: 3px; inset-inline-start: 50%;
  inline-size: 4px; block-size: 4px; transform: translateX(-50%);
  border-radius: 999px; background: var(--text-2-brand);
}
.anta-calendar.events a-button[data-part="day-cell"][data-date="2026-06-25"] {
  color: var(--text-2-critical); font-weight: 600;
}