Date Input

Date inputs let users enter a date through a segmented field or select one visually from a popup calendar. They support locale-aware segment order, min and max constraints, and form validation.

Date Input is the form-associated counterpart to <wa-date-picker>. It renders a segmented input with discrete month, day, and year spinbutton segments in the user's locale order, alongside a popup calendar for visual selection. The segment order, separators, and submitted ISO value all derive from the page's locale.

Use the arrow keys to step through values, type digits to fill segments (focus auto-advances when the segment can accept no further digit), and use Alt+Down Arrow to open the popup calendar. The entire field is one tab stop.

<wa-date-input label="Pick a date"></wa-date-input>

Form Submission

The hidden form value is canonical ISO 8601, regardless of the user's locale:

The example below renders a working form. Submit it (or change the date) and watch the console. The date input submits its value just like a native <input>, regardless of how the user typed or what locale they used.

<form id="dp-form-demo">
  <wa-date-input name="event_date" label="Event date" required value="2026-05-20"></wa-date-input>
  <br />
  <wa-button type="submit" appearance="filled" variant="neutral">Submit</wa-button>
</form>

<pre id="dp-form-demo-output"></pre>

<style>
  #dp-form-demo-output {
    margin-block-start: 1rem;
    margin-block-end: 0;
    padding: 0.75rem;
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    font-size: 0.875em;
  }

  #dp-form-demo-output:empty {
    display: none;
  }
</style>

<script>
  const form = document.getElementById('dp-form-demo');
  const output = document.getElementById('dp-form-demo-output');

  form.addEventListener('submit', event => {
    event.preventDefault();
    const data = new FormData(form);
    const entries = Object.fromEntries(data.entries());
    const formatted = JSON.stringify(entries, null, 2);
    console.log('Submitted FormData:', entries);
    output.textContent = 'Submitted FormData:\n' + formatted;
  });
</script>

Examples

Initial Value

Set the value attribute to an ISO date to pre-populate the input.

<wa-date-input label="Date of birth" value="1990-04-15"></wa-date-input>

Label

Use the label attribute to give the date input an accessible label. For labels that contain HTML, use the label slot instead.

<wa-date-input label="When did you start?"></wa-date-input>

Hint

Add descriptive hint to a date input with the hint attribute. For hints that contain HTML, use the hint slot instead.

<wa-date-input label="Departure" hint="Choose the day you want to leave."></wa-date-input>

Start & End Decorations

Use the start and end slots to add presentational elements like <wa-icon> inside the input.

<wa-date-input label="Departure">
  <wa-icon name="plane-departure" slot="start"></wa-icon>
</wa-date-input>
<br />
<wa-date-input label="Arrival">
  <wa-icon name="plane-arrival" slot="end"></wa-icon>
</wa-date-input>

Clearable

Add the with-clear attribute to let users wipe their selection in a single click. The clear button only appears once a value is set.

<wa-date-input label="Due date" with-clear value="2026-08-01"></wa-date-input>

Min & Max

Use min and max to constrain the selectable range. Dates outside the range render as disabled in the popup, can't be selected by clicking, and are skipped by keyboard navigation.

<wa-date-input label="Check-in" min="2026-01-01" max="2026-12-31"></wa-date-input>

Disabling Past & Future

Use disable-past or disable-future to block all dates strictly before or after today, without having to recalculate min/max every day.

<wa-date-input label="Future bookings only" disable-past></wa-date-input>

Disabling Specific Dates & Days of the Week

Use disabled-days-of-week to block recurring weekdays (e.g., weekends), and disabled-dates to block specific calendar dates such as holidays.

<wa-date-input label="Pick a weekday" disabled-days-of-week="sun sat"></wa-date-input>
<br />
<br />
<wa-date-input label="Excludes holidays" disabled-dates="2026-07-04 2026-12-25 2026-12-31"></wa-date-input>

Date Range

Use mode="range" to let users select a start and end date. The calendar opens in range mode automatically.

<wa-date-input label="Booking" mode="range" months="2"></wa-date-input>

Range Length Constraints

In range mode, use min-range and max-range to require the selection to fall within a specific number of days.

<wa-date-input label="Trip length (3–14 days)" mode="range" months="2" min-range="3" max-range="14"></wa-date-input>

Size

Use the size attribute to match the date input to surrounding form controls.

<wa-date-input size="xs" label="Extra small"></wa-date-input>
<br />
<wa-date-input size="s" label="Small"></wa-date-input>
<br />
<wa-date-input size="m" label="Medium"></wa-date-input>
<br />
<wa-date-input size="l" label="Large"></wa-date-input>
<br />
<wa-date-input size="xl" label="Extra large"></wa-date-input>

Appearance

Use the appearance attribute to switch between the default outlined input, a filled background, or a filled input with an outlined border.

<wa-date-input appearance="filled" label="Filled"></wa-date-input>
<br />
<wa-date-input appearance="filled-outlined" label="Filled outlined"></wa-date-input>

Pill

Use the pill attribute to give the input fully rounded edges.

<wa-date-input pill label="Pill"></wa-date-input>

Disabled

Use the disabled attribute to disable the date input entirely. Disabled date inputs don't accept input, are skipped during tabbing, and don't submit a value with the form.

<wa-date-input label="Disabled" value="2026-05-20" disabled></wa-date-input>

Readonly

Use the readonly attribute to make the date input non-editable while still allowing it to be focused and to submit its value with the form. The popup still opens for browsing.

<wa-date-input label="Readonly" value="2026-05-20" readonly></wa-date-input>

Localization

Set lang on the input (or anywhere up the tree) to localize the input format and popup calendar.

<wa-date-input label="Veranstaltungsdatum" lang="de-DE" value="2026-01-23"></wa-date-input>
<br />
<br />
<wa-date-input label="Date d'événement" lang="fr-FR" value="2026-01-23"></wa-date-input>
<br />
<br />
<wa-date-input label="日付" lang="ja-JP" value="2026-01-23"></wa-date-input>

Customizing the Popup

Use placement to anchor the popup relative to the input and distance to control the gap between them.

<wa-date-input label="Anchored above" placement="top-start" distance="8"></wa-date-input>

Conditionally Disabling Dates

Set the isDateDisabled property to a function that returns true for any date that should be unselectable. This runs in addition to the declarative min, max, disabled-dates, and disabled-days-of-week rules.

<wa-date-input id="dp-workdays" label="Workdays only"></wa-date-input>

<script type="module">
  const dp = document.getElementById('dp-workdays');

  await customElements.whenDefined('wa-date-input');
  await dp.updateComplete;
  dp.isDateDisabled = date => {
    const day = date.getDay();
    return day === 0 || day === 6;
  };
</script>

Custom Day Content

Forward the dayContent callback to render anything inside individual day cells (badges, dots, availability counts).

<wa-date-input id="dp-day-content" label="With custom day content"></wa-date-input>

<script type="module">
  const dp = document.getElementById('dp-day-content');

  await customElements.whenDefined('wa-date-input');
  await dp.updateComplete;

  dp.dayContent = date => {
    // Add a small dot to weekends.
    const day = date.getDay();
    if (day === 0 || day === 6) {
      return (
        date.getDate() +
        ' <span style="display:inline-block;width:.4em;height:.4em;border-radius:50%;background:var(--wa-color-brand-fill-loud);vertical-align:super;"></span>'
      );
    }
    return null; // default
  };
</script>

Custom Per-Day Slots

Set slot="day-YYYY-MM-DD" on a child element to override that specific day's content.

<wa-date-input label="With holiday markers">
  <span slot="day-2026-07-04" title="Independence Day">🇺🇸</span>
  <span slot="day-2026-12-25" title="Christmas">🎄</span>
</wa-date-input>

Custom Navigation Icons

Use the previous-icon and next-icon slots to replace the calendar's default paging arrows.

<wa-date-input label="With custom arrows">
  <wa-icon slot="previous-icon" name="arrow-left"></wa-icon>
  <wa-icon slot="next-icon" name="arrow-right"></wa-icon>
</wa-date-input>

Custom Footer

The footer slot is forwarded to the popup calendar.

<wa-date-input label="With footer">
  <div slot="footer" style="display:flex; gap:.5rem; justify-content:flex-end;">
    <wa-button
      size="s"
      appearance="filled"
      variant="neutral"
      onclick="this.closest('wa-date-input').value = new Date().toISOString().slice(0,10)"
      >Today</wa-button
    >
    <wa-button size="s" appearance="plain" onclick="this.closest('wa-date-input').value = ''">Clear</wa-button>
  </div>
</wa-date-input>

Programmatic API

Set or read the value, listen for changes, and open or close the popup from JavaScript.

<wa-date-input id="dp" label="Programmatic"></wa-date-input>

<script>
  const dp = document.getElementById('dp');

  // Set a value
  dp.value = '2026-01-23';

  // Or set with a Date
  dp.value = new Date(2026, 0, 23);

  // Read parsed value
  console.log(dp.valueAsDate);

  // Open/close
  await dp.show();
  await dp.hide();

  // Listen for changes
  dp.addEventListener('change', e => console.log('value:', e.target.value));
  dp.addEventListener('wa-after-show', () => console.log('popup opened'));
</script>

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

import 'https://ka-f.webawesome.com/[email protected]/components/date-input/date-input.js';

import '@awesome.me/webawesome/dist/components/date-input/date-input.js';

import './webawesome/dist/components/date-input/date-input.js';

import WaDateInput from '@awesome.me/webawesome/dist/react/date-input/index.js';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

Methods

Learn more about methods.

Events

Learn more about events.

CSS Custom Properties

Learn more about CSS custom properties.

Custom States

Learn more about custom states.

CSS Parts

Learn more about CSS parts.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

• <wa-date-picker>
• <wa-icon>
• <wa-popup>