Date Input

<quiet-date-input>

stable

since 5.2

form control

This component is a form-associated custom element. It will submit its value when given a name and placed inside a <form>.

Collects a calendar date or date range through a segmented input and a popup date picker, submitting an ISO date string with forms. Use a date input for birthdays, appointments, deadlines, trip dates, and any form field that needs to capture a single calendar date or a range of dates.

The date input combines a segmented text input — year, month, and day — with a popup calendar. Users can type a date directly using the keyboard or browse the calendar visually. The picker opens when any segment receives focus, similar to how color input works with color picker.

The segment order is derived from the user's locale by default. For example, US users see mm/dd/yyyy, UK users see dd/mm/yyyy, and ISO-aware locales see yyyy-mm-dd.

<quiet-date-input
  label="Choose a date"
  description="When should we follow up?"
  name="follow-up"
  value="2026-03-12"
></quiet-date-input>

For a calendar primitive, see date picker. For known dates such as birthdays, see known date.

Examples Jump to heading

Labels and descriptions Jump to heading

You can use the label and description attributes to provide plain text labels and descriptions. If you want to provide HTML, use the label and description slots instead.

See our cancellation policy before booking.

<quiet-date-input label="Appointment date" name="appointment">
  <span slot="description">
    See our <a href="https://example.com/" target="_blank">cancellation policy</a> before booking.
  </span>
</quiet-date-input>

Providing an initial value Jump to heading

Use the value attribute to provide an initial value. The value must be an ISO 8601 date string (YYYY-MM-DD).

<quiet-date-input
  label="Renewal date"
  value="2026-02-23"
></quiet-date-input>

Submitting forms Jump to heading

When the form is submitted, the date input contributes a single named value. For type="single", the value is an ISO 8601 date string (YYYY-MM-DD). For type="range", the start and end dates are joined with a forward slash (YYYY-MM-DD/YYYY-MM-DD) under one field name. The value stays empty until both dates are entered.

Submit each form below to see the value in the new tab's query string.

<form action="about:blank" target="_blank">
  <quiet-date-input
    name="appointment"
    label="Appointment date"
    value="2026-04-15"
    style="margin-block-end: 1rem;"
  ></quiet-date-input>
  <quiet-button type="submit">Submit</quiet-button>
</form>

<br>

<form action="about:blank" target="_blank">
  <quiet-date-input
    type="range"
    name="trip"
    label="Trip dates"
    value="2026-02-11/2026-02-18"
    style="margin-block-end: 1rem;"
  ></quiet-date-input>
  <quiet-button type="submit">Submit</quiet-button>
</form>

Setting a minimum and maximum date Jump to heading

Use the min and max attributes to restrict which dates are selectable. Both accept ISO date strings. Dates outside the range can't be selected from the calendar and will mark the input as invalid if entered with the keyboard.

<quiet-date-input
  label="Book a delivery slot"
  description="We deliver weekdays only, within the next two weeks."
  min="2026-04-13"
  max="2026-04-24"
  disabled-days="sat sun"
></quiet-date-input>

Selecting a date range Jump to heading

Set type="range" to collect a start and end date in a single field. The input renders two halves separated by an en-dash, and the popover opens to a two-month calendar by default so users can see both endpoints at once.

<quiet-date-input
  type="range"
  label="Trip dates"
  description="When are you traveling?"
  name="trip"
  value="2026-03-09/2026-03-14"
></quiet-date-input>

The value is two ISO 8601 dates joined by a forward slash (YYYY-MM-DD/YYYY-MM-DD). The form data carries the full string in a single named field. Split them on / to get the two dates.

The value stays empty until both halves are fully entered and form a valid range. While only one half is complete, the form value is empty and the input enters a tentative state that you can target with :state(tentative) in CSS.

If the user types an end date earlier than the start date, the form will be marked invalid with the message "End date must be on or after start date." When the user selects a range in the calendar by clicking dates in reverse order, the picker auto-swaps them.

Constraining the range length Jump to heading

Use min-range and max-range to set bounds on how many days a range may span, inclusive of both ends. The picker visually disables cells beyond the allowed bounds while the user hovers during selection, and the form is marked invalid if a typed range violates the bounds.

<quiet-date-input
  type="range"
  label="Reservation"
  description="Stay between 3 and 14 nights."
  min-range="3"
  max-range="14"
></quiet-date-input>

Required date range Jump to heading

Combine type="range" with required to require both endpoints before form submission.

<form action="about:blank" target="_blank">
  <quiet-date-input
    type="range"
    name="trip"
    label="Trip dates"
    required
    style="margin-block-end: 1rem;"
  ></quiet-date-input>
  <quiet-button type="submit">Submit</quiet-button>
</form>

Disabling specific dates Jump to heading

Use the disabled-dates attribute to disable individual ISO dates or inclusive ranges. Dates are space-delimited. Ranges use : as the delimiter — for example, 2026-07-01:2026-07-07 disables every day from July 1 through July 7 inclusive.

<quiet-date-input
  label="Pick a date"
  initial-month="2026-03"
  disabled-dates="2026-03-03 2026-03-04 2026-03-13:2026-03-17"
></quiet-date-input>

Disabling days of the week Jump to heading

Use the disabled-days attribute to disable every occurrence of one or more weekdays. Accepts space-delimited tokens: sun, mon, tue, wed, thu, fri, sat.

<quiet-date-input
  label="Weekdays only"
  disabled-days="sat sun"
></quiet-date-input>

Custom disabled logic Jump to heading

For anything more complex than dates and weekdays, set the isDateDisallowed property to a function. It runs for every cell and returns true when the date should be disabled. The result is combined with disabled-dates and disabled-days via OR.

<quiet-date-input
  id="date-input__future-only"
  label="Pick a future date"
></quiet-date-input>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const input = document.getElementById('date-input__future-only');
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  input.isDateDisallowed = (date) => date < today;
</script>

Showing multiple months Jump to heading

Set the months attribute to render two or more months side by side inside the popover. This is helpful for browsing across month boundaries.

<quiet-date-input
  label="Event date"
  months="2"
></quiet-date-input>

Paging behavior Jump to heading

When months is greater than 1, the page-by attribute controls whether the previous and next buttons page by the full visible width (visible, the default) or by a single month (single).

<quiet-date-input
  label="Page one month at a time"
  months="2"
  page-by="single"
></quiet-date-input>

Localization Jump to heading

The date input's segment order, month names, labels, and error messages are localized using the component's lang attribute. Import the corresponding translation so the UI strings are available. The segment order and date formatting are derived automatically from the locale via Intl.

<quiet-date-input lang="es" label="Spanish" value="2026-02-23"></quiet-date-input>
<quiet-date-input lang="ja" label="Japanese" value="2026-04-09"></quiet-date-input>

<script type="module">
  import '/dist/translations/es.js';
  import '/dist/translations/ja.js';
</script>

Choosing the first day of the week Jump to heading

Use the week-starts-with attribute to override the locale's first day of the week. Valid values are sun, mon, tue, wed, thu, fri, and sat.

<quiet-date-input
  label="Event date"
  week-starts-with="mon"
></quiet-date-input>

Hiding adjacent month days Jump to heading

By default, the leading and trailing weeks of the calendar grid render days outside the current month as muted, selectable cells. Set without-adjacent-days to hide them and show blank cells instead.

<quiet-date-input
  label="Pick a date"
  without-adjacent-days
></quiet-date-input>

Week numbers Jump to heading

Set with-week-numbers to render the ISO or US week number along the leading edge of the calendar grid. The system is auto-derived from week-starts-with: weeks starting on Monday use ISO 8601 numbering, otherwise US numbering is used.

<quiet-date-input
  label="Event date"
  with-week-numbers
  week-starts-with="mon"
></quiet-date-input>

Weekday label format Jump to heading

Set day-format to control how weekday headers are formatted in the calendar grid. Accepts narrow, short (the default), or long.

<quiet-date-input
  label="Pick a date"
  day-format="narrow"
></quiet-date-input>

Month label format Jump to heading

Set month-format to control how the month name appears in the calendar header and the view-toggle button. Accepts narrow, short, or long (the default).

<quiet-date-input
  label="Pick a date"
  month-format="short"
></quiet-date-input>

Setting the initial month Jump to heading

Use the initial-month attribute to control which month and year the popover opens to when no value is set. Accepts either YYYY-MM or YYYY-MM-DD.

<quiet-date-input
  label="Open to a specific month"
  initial-month="2026-03"
></quiet-date-input>

Custom day content Jump to heading

Set the renderDay property to a function to control the content of every day cell in the calendar. The function receives a Date and returns a string or a TemplateResult. The default renders the day number.

<quiet-date-input
  id="date-input__events"
  label="Pick a date"
  value="2026-03-19"
></quiet-date-input>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const input = document.getElementById('date-input__events');
  const events = ['2026-03-05', '2026-03-19', '2026-03-26'];

  input.renderDay = (date) => {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    const iso = `${y}-${m}-${d}`;

    if (events.includes(iso)) {
      return '<span>🐈</span>';
    }

    return String(date.getDate());
  };
</script>

You should only return trusted HTML from the renderDay() function, otherwise you may become vulnerable to XSS exploits.

Customizing the year view Jump to heading

The renderYear property works like renderDay but applies to cells in the year picker view. The default renders the four-digit year.

<quiet-date-input
  id="date-input__year-labels"
  label="Pick a date"
></quiet-date-input>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const input = document.getElementById('date-input__year-labels');
  input.renderYear = (year) => {
    const decade = Math.floor(year / 10) * 10;
    return `
      <div style="display: flex; flex-direction: column; align-items: center; line-height: 1.1;">
        <small>The '${String(decade).slice(-2)}s</small>
        <span>${year}</span>
      </div>
    `;
  };
</script>

You should only return trusted HTML from the renderYear() function, otherwise you may become vulnerable to XSS exploits.

Adding a clear button Jump to heading

To add a clear button to the date input, use the with-clear attribute. The clear button appears once the date input has a value. The quiet-input event will be emitted when the clear button is activated.

<quiet-date-input
  label="Pick a date"
  name="date"
  value="2026-04-15"
  with-clear
></quiet-date-input>

Start and end content Jump to heading

Use the start and end slots to add presentational icons or text. Avoid interactive elements such as buttons, links, etc. Works well with <quiet-icon> and <svg> elements.

<quiet-date-input label="Departure" name="departure">
  <quiet-icon slot="start" name="plane-departure"></quiet-icon>
</quiet-date-input>

<br>

<quiet-date-input label="Deadline" name="deadline">
  <quiet-icon slot="end" name="flag"></quiet-icon>
</quiet-date-input>

Adding shortcut buttons Jump to heading

The footer slot is forwarded to the embedded calendar. Use it to add shortcut buttons like "Today".

              
                  Today
                  Clear

<quiet-date-input
  label="Pick a date"
  id="date-input__with-today"
>
  <div slot="footer" class="date-input__footer">
    <quiet-button class="today" size="sm">Today</quiet-button>
    <quiet-button class="clear" size="sm">Clear</quiet-button>
  </div>
</quiet-date-input>

<style>
  .date-input__footer {
    display: flex;
    gap: .5rem;
    margin-block-start: .5rem;
  }
</style>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const input = document.getElementById('date-input__with-today');
  const todayButton = input.querySelector('.today');
  const clearButton = input.querySelector('.clear');

  todayButton.addEventListener('click', () => {
    const today = new Date();
    const y = today.getFullYear();
    const m = String(today.getMonth() + 1).padStart(2, '0');
    const d = String(today.getDate()).padStart(2, '0');
    input.value = `${y}-${m}-${d}`;
  });

  clearButton.addEventListener('click', () => {
    input.value = '';
  });
</script>

Changing the appearance Jump to heading

Date inputs support multiple visual styles through the appearance attribute.

<quiet-date-input label="Normal" appearance="normal"></quiet-date-input>
<br>
<quiet-date-input label="Filled" appearance="filled"></quiet-date-input>
<br>
<quiet-date-input label="Unstyled" appearance="unstyled"></quiet-date-input>

Pill-shaped date inputs Jump to heading

Date inputs can be rendered with pill-shaped edges by adding the pill attribute.

<quiet-date-input pill label="Pill-shaped"></quiet-date-input>

Changing the size Jump to heading

Use the size attribute to change the date input's size.

<quiet-date-input size="xs" label="Extra small"></quiet-date-input><br>
<quiet-date-input size="sm" label="Small"></quiet-date-input><br>
<quiet-date-input size="md" label="Medium"></quiet-date-input><br>
<quiet-date-input size="lg" label="Large"></quiet-date-input><br>
<quiet-date-input size="xl" label="Extra large"></quiet-date-input>

Disabling Jump to heading

Use the disabled attribute to disable the date input.

<quiet-date-input
  label="Disabled date input"
  disabled
  value="2026-04-30"
></quiet-date-input>

Read-only Jump to heading

Use the readonly attribute to make the date input read-only. Users can move between segments but can't change the value.

<quiet-date-input
  label="Read-only date input"
  readonly
  value="2026-02-14"
></quiet-date-input>

Showing labels on the side Jump to heading

With the quiet-side-label utility, you can show labels on the side instead of on top of the date input. You can control the width of the label by setting the --label-width custom property.

<quiet-date-input
  class="quiet-side-label"
  style="--label-width: 10ch;"
  name="start"
  label="Start date"
  description="When does the trip begin?"
></quiet-date-input>
<br>
<quiet-date-input
  class="quiet-side-label"
  style="--label-width: 10ch;"
  name="end"
  label="End date"
  description="When does the trip end?"
></quiet-date-input>

Validation Jump to heading

The required attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission when the date input is missing a value.

<form action="about:blank" target="_blank">
  <quiet-date-input
    name="date"
    label="Choose a date"
    required
    style="margin-block-end: 1rem;"
  ></quiet-date-input>
  <quiet-button type="submit">Submit</quiet-button>
</form>

Using custom validation Jump to heading

Use the setCustomValidity() method to make the date input invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, set it to an empty string.

<form action="about:blank" method="get" target="_blank" id="date-input__custom">
  <quiet-date-input
    name="date"
    label="Choose a date"
    description="This field will be invalid until custom validation is removed"
  ></quiet-date-input>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
</form>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const form = document.getElementById('date-input__custom');
  const dateInput = form.querySelector('quiet-date-input');

  dateInput.setCustomValidity('Please pick a different date!');
</script>

Styling validation Jump to heading

You can style valid and invalid date inputs using the :valid and :invalid pseudo classes.

              
                Submit
                Reset

<form action="about:blank" method="get" target="_blank" class="date-input__validation-pseudo">
  <quiet-date-input
    name="date"
    label="Choose a date"
    description="This field is required"
    required
  ></quiet-date-input>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

<style>
  .date-input__validation-pseudo {
    quiet-date-input:valid {
      outline: solid 2px var(--quiet-constructive-stroke-mid);
      outline-offset: .5rem;
    }

    quiet-date-input:invalid {
      outline: solid 2px var(--quiet-destructive-stroke-mid);
      outline-offset: .5rem;
    }
  }
</style>

More often than not, you'll want to use the user-valid and user-invalid custom states instead. This way, validation styles are only shown after the user interacts with the form control or when the form is submitted.

              
                Submit
                Reset

<form action="about:blank" method="get" target="_blank" class="date-input__validation-custom">
  <quiet-date-input
    name="date"
    label="Choose a date"
    description="This field is required"
    required
  ></quiet-date-input>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

<style>
  .date-input__validation-custom {
    quiet-date-input:state(user-valid) {
      outline: solid 2px var(--quiet-constructive-stroke-mid);
      outline-offset: .5rem;
    }

    quiet-date-input:state(user-invalid) {
      outline: solid 2px var(--quiet-destructive-stroke-mid);
      outline-offset: .5rem;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

Self-hosted

To manually import <quiet-date-input> from the CDN, use the following code.

import 'https://cdn.quietui.org/v5.2.0/components/date-input/date-input.js';

To manually import <quiet-date-input> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path.

import '/path/to/quiet/components/date-input/date-input.js';

Slots Jump to heading

Date Input supports the following slots. Learn more about using slots

Name	Description
`label`	The date input's label. For plain-text labels, you can use the `label` attribute instead.
`description`	The date input's description. For plain-text descriptions, you can use the `description` attribute instead.
`start`	An icon or similar element to place before the segments. Works great with `<quiet-icon>`.
`end`	An icon or similar element to place after the segments. Works great with `<quiet-icon>`.
`footer`	Content rendered below the calendar inside the popover. Useful for shortcut buttons like "Today".

Properties Jump to heading

Date Input has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property	Description	Type	Default
`label`	The date input's label. If you need to provide HTML in the label, use the `label` slot instead.	`string`
`description`	The date input's description. If you need to provide HTML in the description, use the `description` slot instead.	`string`
`name`	The name of the date input. This will be submitted with the form as a name/value pair.	`string`
`value`	The date input's value. In `single` mode, this is an ISO 8601 date string (`YYYY-MM-DD`). In `range` mode, this is two dates joined by `/` (`YYYY-MM-DD/YYYY-MM-DD`). Empty when nothing is selected or when the value isn't complete.	`string`	`''`
`type`	The selection mode. `single` collects one date; `range` collects a start and end date.	`'single' \| 'range'`	`'single'`
`disabled`	Disables the date input.	`boolean`	`false`
`readonly`	Makes the date input a read-only field.	`boolean`	`false`
`withClear` `with-clear`	Adds a clear button to the date input when it's not blank.	`boolean`	`false`
`appearance`	The type of date input to render.	`'normal' \| 'filled' \| 'unstyled'`	`'normal'`
`size`	The date input's size.	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`pill`	Draws the date input in a pill shape.	`boolean`	`false`
`min`	The earliest selectable date as an ISO `YYYY-MM-DD` string.	`string`
`max`	The latest selectable date as an ISO `YYYY-MM-DD` string.	`string`
`minRange` `min-range`	The minimum number of days a range may span, inclusive of both ends. Only applies when `type="range"`.	`number`
`maxRange` `max-range`	The maximum number of days a range may span, inclusive of both ends. Only applies when `type="range"`.	`number`
`disabledDates` `disabled-dates`	A space-delimited list of ISO dates (`YYYY-MM-DD`) or inclusive ISO date ranges (`YYYY-MM-DD:YYYY-MM-DD`) to disable. Disallowed dates can't be selected and will mark the date input as invalid when matched.	`string`	`''`
`disabledDays` `disabled-days`	A space-delimited list of weekday tokens (`sun mon tue wed thu fri sat`) to disable. Every matching weekday is disabled.	`string`	`''`
`withoutAdjacentDays` `without-adjacent-days`	Hides the trailing days of the previous month and the leading days of the next month inside the popover. By default, these adjacent days are rendered as muted, selectable cells.	`boolean`	`false`
`withWeekNumbers` `with-week-numbers`	Renders week numbers along the leading edge of the popover's calendar grid.	`boolean`	`false`
`weekStartsWith` `week-starts-with`	The first day of the week shown in the popover. Defaults to the locale's first day.	`Weekday`
`dayFormat` `day-format`	The format used for weekday header labels inside the popover.	`'narrow' \| 'short' \| 'long'`	`'short'`
`monthFormat` `month-format`	The format used for month names in the popover.	`'narrow' \| 'short' \| 'long'`	`'long'`
`months`	Number of months to display side by side in the popover. When `type="range"` and `months` hasn't been explicitly set, this defaults to 2 (so users can see both range endpoints at once).	`number`	`1`
`pageBy` `page-by`	When `months > 1`, page by all visible months at once or by a single month.	`'visible' \| 'single'`	`'visible'`
`initialMonth` `initial-month`	Sets the initial month and year shown when `value` is empty. Accepts `YYYY-MM` or `YYYY-MM-DD` (only the month and year are used).	`string`
`isDateDisallowed`	An overridable callback that determines whether a specific date is disallowed in the popover. Combined with `disabled-dates` and `disabled-days` via OR.	`(date: Date) => boolean`
`renderDay`	An overridable callback used to render each day cell's content in the popover.	`((date: Date) => string \| TemplateResult) \| null`	`null`
`renderYear`	An overridable callback used to render each year cell in the popover.	`((year: number) => string \| TemplateResult) \| null`	`null`
`placement`	The placement of the date picker popover in reference to the date input. The popover will shift to a more optimal location if the preferred placement doesn't have enough room.	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'right' \| 'right-start' \| 'right-end' \| 'left' \| 'left-start' \| 'left-end'`	`'bottom-start'`
`distance`	The distance of the popover from its trigger.	`number`	`0`
`offset`	The offset of the popover along its trigger.	`number`	`0`
`form`	The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of this attribute must be an ID of a form in the same document or shadow root.	`string`
`required`	Makes the date input required. Form submission will not be allowed when the date input is blank.	`boolean`	`false`
`autofocus`	Tells the browser to focus the date input when the page loads or a dialog is shown.	`boolean`
`startValue`	Read-only ISO date for the start half. In single mode, mirrors `value`. Empty when the half is incomplete.	`string`
`endValue`	Read-only ISO date for the end half. In range mode only; otherwise always empty.	`string`

Methods Jump to heading

Date Input supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name	Description	Arguments
`getSegmentOrder()`	Returns the full traversal order — one half (single mode) or two halves (range mode) of three segments each. All cross-half navigation and aggregation goes through this helper so the half logic isn't scattered.
`getSegmentMaxLength()`	Returns the max digit length for a segment.	`loc: SegmentLocation`
`getSegmentBounds()`	Min and max allowed values for a segment, scoped to the same half. Date segments are always numeric.	`loc: SegmentLocation`
`setSegmentBuffer()`	Updates a single segment's buffer and recomposes the value when possible. Returns true when the segment's buffer actually changed, so callers can decide whether to dispatch an `input` event for the user's edit — even when the partially-typed value doesn't yet compose to a full ISO date.	`loc: SegmentLocation, digits: string`
`getSegmentBuffer()`	Returns the current text buffer for a segment.	`loc: SegmentLocation`
`areSegmentsEqual()`	True when two segment identities refer to the same segment.	`a: SegmentLocation, b: SegmentLocation`
`getSegmentElement()`	Returns the segment element for a given location, or null if not yet rendered.	`loc: SegmentLocation`
`classifyDigit()`	Classifies what a digit keypress should do, given the segment's current state.	`loc: SegmentLocation, digit: string`
`stepSegment()`	Steps a segment by `delta`, wrapping at min/max. First press on an empty segment seeds today.	`loc: SegmentLocation, delta: number`
`getPageStepDelta()`	Returns the PageUp/PageDown delta for the given segment.	`loc: SegmentLocation, direction: 1 \| -1`
`getSeparatorKeys()`	Returns the keys that should advance focus to the next segment when the current buffer is non-empty.
`tryPasteValue()`	Attempts to parse a pasted string as a whole date (or range) value and populate every segment.	`text: string`
`handleSegmentFocus()`	Override to dispatch QuietFocusEvent after the mixin tracks focus state.	`loc: SegmentLocation, event: FocusEvent`
`handleSegmentBlur()`	Override to dispatch QuietBlurEvent after the mixin tracks blur state.	`loc: SegmentLocation, event: FocusEvent`
`handleSegmentShortcut()`	Host-specific shortcut keys: Alt+ArrowDown opens picker, Escape/Enter close it.	`_loc: SegmentLocation, event: KeyboardEvent`
`blur()`	Removes focus from the date input.
`focus()`	Sets focus to the date input's first segment and opens the picker (matches color-input).
`showPicker()`	Shows the date picker.
`hidePicker()`	Hides the date picker. Always tears down listeners and the autoUpdate cleanup, even when disabled.
`checkValidity()`	Checks if the form control has any restraints and whether it satisfies them. If invalid, `false` will be returned and the `invalid` event will be dispatched. If valid, `true` will be returned.
`reportValidity()`	Checks if the form control has any restraints and whether it satisfies them. If invalid, `false` will be returned and the `invalid` event will be dispatched. In addition, the problem will be reported to the user. If valid, `true` will be returned.
`setCustomValidity()`	Sets a custom validation message for the form control. If this message is not an empty string, then the form control is considered invalid and the specified message will be displayed to the user when reporting validity. Setting an empty string clears the custom validity state.	`message: string`

Events Jump to heading

Date Input dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`quiet-blur`	Emitted when the date input loses focus. This event does not bubble.
`quiet-change`	Emitted when the user commits changes to the date input's value.
`quiet-focus`	Emitted when the date input receives focus. This event does not bubble.
`quiet-input`	Emitted when the date input's value changes.
`quiet-range-start`	Emitted in range mode when the user anchors the first end of a range in the popover. `event.detail.start` is the anchor's ISO date.
`quiet-range-end`	Emitted in range mode when the user commits the second end of a range. `event.detail.start` and `event.detail.end` are the committed ISO dates.

CSS custom properties Jump to heading

Date Input supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--show-duration`	The duration of the show/hide animation.	`50ms`

CSS parts Jump to heading

Date Input exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`label`	The element that contains the date input's label.	`::part(label)`
`description`	The element that contains the date input's description.	`::part(description)`
`visual-box`	The element that wraps the internal segments and the calendar button.	`::part(visual-box)`
`segments`	The container that wraps all of the date segments.	`::part(segments)`
`start`	The container that wraps the three start-half segments (range mode only).	`::part(start)`
`end`	The container that wraps the three end-half segments (range mode only).	`::part(end)`
`segment`	An individual date segment. Use the `data-half` and `data-segment` attributes to target a specific one (e.g. `[data-half="start"][data-segment="month"]`).	`::part(segment)`
`separator`	A separator between segments within a half (e.g. `/`).	`::part(separator)`
`range-separator`	The en-dash separator between the start and end halves (range mode only).	`::part(range-separator)`
`clear-button`	The clear button (shown when `with-clear` is set and the input isn't blank).	`::part(clear-button)`
`trigger`	The calendar trigger button.	`::part(trigger)`
`trigger-icon`	The icon inside the calendar trigger button.	`::part(trigger-icon)`
`date-picker`	The embedded `<quiet-date-picker>` shown in the popover.	`::part(date-picker)`

Custom States Jump to heading

Date Input has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Name	Description	CSS selector
`disabled`	Applied when the date input is disabled.	`:state(disabled)`
`blank`	Applied when the date input has a blank value.	`:state(blank)`
`focused`	Applied when any segment or the calendar button has focus.	`:state(focused)`
`open`	Applied when the date picker is open.	`:state(open)`
`range`	Applied when `type="range"`.	`:state(range)`
`tentative`	Applied while a range is being selected (the start has been anchored but the range isn't committed yet) or while typed entry has filled the start half but not the end half.	`:state(tentative)`
`user-valid`	Applied when the date input is valid and the user has sufficiently interacted with it.	`:state(user-valid)`
`user-invalid`	Applied when the date input is invalid and the user has sufficiently interacted with it.	`:state(user-invalid)`

Dependencies Jump to heading

Date Input automatically imports the following elements. Sub-dependencies are also included in this list.

Date Input

Examples Jump to heading #

Labels and descriptions Jump to heading #

Providing an initial value Jump to heading #

Submitting forms Jump to heading #

Setting a minimum and maximum date Jump to heading #

Selecting a date range Jump to heading #

Constraining the range length Jump to heading #

Required date range Jump to heading #

Disabling specific dates Jump to heading #

Disabling days of the week Jump to heading #

Custom disabled logic Jump to heading #

Showing multiple months Jump to heading #

Paging behavior Jump to heading #

Localization Jump to heading #

Choosing the first day of the week Jump to heading #

Hiding adjacent month days Jump to heading #

Week numbers Jump to heading #

Weekday label format Jump to heading #

Month label format Jump to heading #

Setting the initial month Jump to heading #

Custom day content Jump to heading #

Customizing the year view Jump to heading #

Adding a clear button Jump to heading #

Start and end content Jump to heading #

Adding shortcut buttons Jump to heading #

Changing the appearance Jump to heading #

Pill-shaped date inputs Jump to heading #

Changing the size Jump to heading #

Disabling Jump to heading #

Read-only Jump to heading #

Showing labels on the side Jump to heading #

Validation Jump to heading #

Using custom validation Jump to heading #

Styling validation Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Custom States Jump to heading #

Dependencies Jump to heading #