Date Input

A customizable date entry field that allows users to input dates in various formats.

My date input

Selected date:

import { $, component$, useSignal, useStyles$ } from "@builder.io/qwik";

import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  const selectedDate = useSignal<DateInput.ISODate | null>(null);
  const handleChange$ = $((date: DateInput.ISODate | null) => {
    selectedDate.value = date;
  });

  return (
    <div class="date-input-container">
      <DateInput.Root class="date-input-root-col">
        <DateInput.Label>My date input</DateInput.Label>
        <DateInput.Entry onChange$={handleChange$} separator="/">
          <DateInput.Month />
          <DateInput.Day />
          <DateInput.Year />
          <DateInput.HiddenInput name="date" value={selectedDate.value} />
        </DateInput.Entry>
      </DateInput.Root>

      <div>
        <p>
          Selected date: <span class="external-value">{selectedDate.value}</span>
        </p>
      </div>
    </div>
  );
});

// example styles
import styles from "./date-input.css?inline";

Note: This component relies on field-sizing: content; to set the width of the inputs based on the content of the input or its placeholder. This is supported in Chromium-based browsers, but may not work properly in other browsers. If you need to support other or older browsers, you can manage the width of the inputs in your own CSS.

Features

Date and time segment UI for structured input
Keyboard tab and arrow navigation between segments
Composable format (mm/dd/yyyy, dd.mm.yyyy, yyyy-mm-dd, etc.)
Automatic segment validation and constraints
Dynamic date value construction from segments
Smart segment focus management
Month-aware day validation (adjusts max days based on month/year)
Placeholder text and visual state handling
Accessibility features including ARIA attributes
Form integration with hidden input

Examples

Basic Usage

The Date Input component provides a structured way to enter dates with separate segments for year, month, and day. The basic implementation includes a root component that manages state, a label for accessibility, date entry container, and individual segments.

Enter your date of birth:

import { component$ } from "@builder.io/qwik";

import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  return (
    <DateInput.Root>
      <DateInput.Label>Enter your date of birth:</DateInput.Label>
      <DateInput.Entry>
        <DateInput.Year />
        <span>-</span>
        <DateInput.Month showLeadingZero={true} />
        <span>-</span>
        <DateInput.Day showLeadingZero={true} />
        <DateInput.HiddenInput name="date-of-birth" />
      </DateInput.Entry>
    </DateInput.Root>
  );
});

In this example:

<DateInput.Root> serves as the container and handles overall state
<DateInput.Label> provides an accessible label for the input
<DateInput.Entry> groups the segments for proper accessibility and handles input, output, and state for an individual date value
<DateInput.Year>, <DateInput.Month>, and <DateInput.Day> are the individual input segments
<DateInput.HiddenInput> provides a hidden native input for form submission

Visual Features

Custom Date Formats

You can customize the date format by arranging the segments in any order and using different separators.

European-style date entry:

import { component$, useStyles$ } from "@builder.io/qwik";

import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  return (
    <DateInput.Root class="date-input-root-row">
      <DateInput.Label>European-style date entry:</DateInput.Label>
      <DateInput.Entry separator=".">
        <DateInput.Day placeholder="DD" showLeadingZero={true} />
        <DateInput.Month placeholder="MM" showLeadingZero={true} />
        <DateInput.Year placeholder="YYYY" />
      </DateInput.Entry>
    </DateInput.Root>
  );
});

// example styles
import styles from "./date-input.css?inline";

This example shows a European-style date format (DD.MM.YYYY) with dots as separators. The showLeadingZero prop ensures single-digit values are displayed with a leading zero.

Leading Zeros

The showLeadingZero prop can be applied to month or day segments to ensure consistent formatting with leading zeros for single-digit values.

Choose your date:

Selected date: 2021-01-01

import { $, component$, useSignal } from "@builder.io/qwik";
import { useStyles$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  const selectedDate = useSignal<DateInput.ISODate | null>("2021-01-01");
  const handleChange$ = $((date: DateInput.ISODate | null) => {
    selectedDate.value = date;
  });

  return (
    <div class="date-input-container">
      <DateInput.Root class="date-input-root-col">
        <DateInput.Label>Choose your date:</DateInput.Label>
        <DateInput.Entry
          date={selectedDate.value}
          onChange$={handleChange$}
          separator="/"
        >
          <DateInput.Month showLeadingZero />
          <DateInput.Day showLeadingZero />
          <DateInput.Year />
        </DateInput.Entry>
      </DateInput.Root>

      <p>
        Selected date: <span class="external-value">{selectedDate.value}</span>
      </p>

      <div class="date-input-button-container">
        <button
          onClick$={() => {
            const date = new Date().toISOString().split("T")[0] as DateInput.ISODate;
            selectedDate.value = date;
          }}
          type="button"
          class="set-value-button"
        >
          Set to today
        </button>
        <button
          onClick$={() => (selectedDate.value = null)}
          type="button"
          class="set-null-button"
        >
          Clear
        </button>
      </div>
    </div>
  );
});

// example styles
import styles from "./date-input.css?inline";

In this example, both the month and day segments display leading zeros, creating a consistent visual appearance.

Separators

The Entry component accepts a separator prop, which then gets automatically inserted between the segments of the input.

<DateInput.Entry separator="/">
  <DateInput.Month />
  <DateInput.Day />
  <DateInput.Year />
</DateInput.Entry>

You may instead use normal markup to insert separators between the segments.

<DateInput.Root>
  <DateInput.Label>Enter your date of birth:</DateInput.Label>
  <DateInput.Entry>
    <DateInput.Year />
    <span>-</span>
    <DateInput.Month />
    <span>-</span>
    <DateInput.Day />
  </DateInput.Entry>
</DateInput.Root>

Example using a custom separator icon inserted via the separator prop:

When's your next pickleball match?

import { component$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  return (
    <DateInput.Root>
      <DateInput.Label>When's your next pickleball match?</DateInput.Label>
      <DateInput.Entry separator={<PickleballIcon />}>
        <DateInput.Month />
        <DateInput.Day />
        <DateInput.Year />
      </DateInput.Entry>
    </DateInput.Root>
  );
});

const PickleballIcon = component$(() => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      aria-hidden="true"
      style={{
        display: "inline-block"
      }}
    >
      <path
        d="M8 4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4V10C16 14.4183 12.4183 18 8 18V4Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linejoin="round"
      />
      <path
        d="M8 4V18C6.34315 18 5 16.6569 5 15V7C5 5.34315 6.34315 4 8 4Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linejoin="round"
      />
      <circle
        cx="12"
        cy="7"
        r="1.5"
        stroke="currentColor"
        stroke-width="1.5"
        fill="none"
      />
      <path
        d="M8 19V22"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </svg>
  );
});

Advanced Usage

Form Integration

The Date Input can be integrated with forms using the <DateInput.HiddenInput> component.

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const formData = useSignal<Record<string, FormDataEntryValue>>();

  return (
    <form
      preventdefault:submit
      onSubmit$={(e) => {
        const form = e.target as HTMLFormElement;
        formData.value = Object.fromEntries(new FormData(form));
      }}
      class="date-input-container"
    >
      <DateInput.Root>
        <DateInput.Label>Appointment Date</DateInput.Label>
        <DateInput.Entry separator="/">
          <DateInput.Month />
          <DateInput.Day />
          <DateInput.Year />
          <DateInput.HiddenInput name="appointment-date" />
        </DateInput.Entry>
      </DateInput.Root>
      <div class="date-input-button-container">
        <button type="submit" class="submit-button">
          Submit
        </button>
      </div>
      {formData.value && (
        <div class="submitted-data">
          Submitted: {JSON.stringify(formData.value, null, 2)}
        </div>
      )}
    </form>
  );
});

// example styles
import styles from "./date-input.css?inline";

The name attribute on the <DateInput.HiddenInput> component ensures the date value is included when the form is submitted.

Reactive Binding

You can bind the date value to a signal for two-way data binding.

Party like it's:

Bound date: 1999-12-31

import { component$, useSignal } from "@builder.io/qwik";
import { useStyles$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  const selectedDate = useSignal<DateInput.ISODate | null>("1999-12-31");

  return (
    <div class="date-input-container">
      <DateInput.Root class="date-input-root-col">
        <DateInput.Label>Party like it's:</DateInput.Label>
        <DateInput.Entry bind:date={selectedDate}>
          <DateInput.Month />
          <span>/</span>
          <DateInput.Day />
          <span>/</span>
          <DateInput.Year />
        </DateInput.Entry>
      </DateInput.Root>
      <p>
        Bound date: <span class="external-value">{selectedDate.value}</span>
      </p>
      <div class="date-input-button-container">
        <button
          onClick$={() => (selectedDate.value = "2099-12-31")}
          type="button"
          class="set-value-button"
        >
          Set to 2099-12-31
        </button>
        <button
          onClick$={() => (selectedDate.value = null)}
          type="button"
          class="set-null-button"
        >
          Clear
        </button>
      </div>
    </div>
  );
});

// example styles
import styles from "./date-input.css?inline";

This example demonstrates binding the date to a signal with bind:date. Changes made in the input are reflected in the external state, and external changes update the input.

Value-Based One-Way Data Binding

For more granular control, you can use the Date Input with date and onChange$ props.

My date input

Selected date:

Times changed: 0

import { $, component$, useSignal, useStyles$ } from "@builder.io/qwik";

import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  const selectedDate = useSignal<DateInput.ISODate | null>();
  const numChanges = useSignal(0);
  const handleChange$ = $((date: DateInput.ISODate | null) => {
    numChanges.value++;
    selectedDate.value = date;
  });

  return (
    <div class="date-input-container">
      <DateInput.Root class="date-input-root-col">
        <DateInput.Label>My date input</DateInput.Label>
        <DateInput.Entry onChange$={handleChange$} separator="/">
          <DateInput.Month />
          <DateInput.Day />
          <DateInput.Year />
        </DateInput.Entry>
      </DateInput.Root>

      <div>
        <p>Selected date: {selectedDate.value}</p>
        <p>Times changed: {numChanges.value}</p>
      </div>
    </div>
  );
});

// example styles
import styles from "./date-input.css?inline";

The onChange$ handler is called whenever the date changes, allowing you to track changes and update external state.

Observing Changes at the Root Level

You can also use the onChange$ handler on the <DateInput.Root> component to observe changes at the root level. The event fires whenever any date changes in the Date Input context, providing the date values as an array. This can be useful when you have two or more Date Entry components under the same root.

import { $, component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const secretDate = new Date("2001-01-01").getTime();
  const dates = useSignal<(DateInput.ISODate | null)[]>([]);
  const resultText = useSignal<string | null>(null);

  const getGuessResult = $(
    (firstGuess: DateInput.ISODate | null, secondGuess: DateInput.ISODate | null) => {
      if (firstGuess && secondGuess) {
        const firstGuessDistance = Math.abs(new Date(firstGuess).getTime() - secretDate);
        const secondGuessDistance = Math.abs(
          new Date(secondGuess).getTime() - secretDate
        );

        if (firstGuessDistance === 0) {
          return "The first date is correct!";
        }
        if (secondGuessDistance === 0) {
          return "The second date is correct!";
        }
        if (firstGuessDistance === secondGuessDistance) {
          return "The dates are equidistant from my date";
        }
        if (firstGuessDistance < secondGuessDistance) {
          return "The first date is closer";
        }
        return "The second date is closer";
      }

      // We don't have two dates to compare
      return null;
    }
  );

  const handleChange$ = $(async (newDates: (DateInput.ISODate | null)[]) => {
    dates.value = newDates;
    const [firstGuess, secondGuess] = newDates;
    resultText.value = await getGuessResult(firstGuess, secondGuess);
  });

  return (
    <form class="date-input-container" preventdefault:submit>
      <p>
        <b>I'm thinking of a date.</b> I'll give you two guesses, and tell you which is
        closer.
      </p>
      <DateInput.Root onChange$={handleChange$}>
        <DateInput.Label>Two guesses</DateInput.Label>
        <div class="date-input-date-range">
          <DateInput.Entry data-first-entry>
            <DateInput.Year />
            <span>-</span>
            <DateInput.Month showLeadingZero={true} />
            <span>-</span>
            <DateInput.Day showLeadingZero={true} />
          </DateInput.Entry>

          <span>||</span>

          <DateInput.Entry data-second-entry>
            <DateInput.Year />
            <span>-</span>
            <DateInput.Month showLeadingZero={true} />
            <span>-</span>
            <DateInput.Day showLeadingZero={true} />
          </DateInput.Entry>
        </div>
      </DateInput.Root>

      <div>
        Dates: <span class="external-value">{JSON.stringify(dates.value)}</span>
      </div>

      <div>Result: {resultText.value}</div>
    </form>
  );
});

// example styles
import styles from "./date-input.css?inline";

Disabled State

The Date Input can be disabled to prevent user interaction.

Permanently Disabled

import { component$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  return (
    <DateInput.Root>
      <DateInput.Label>Permanently Disabled</DateInput.Label>
      <DateInput.Entry date="2000-12-25" disabled={true} separator="/">
        <DateInput.Month />
        <DateInput.Day />
        <DateInput.Year />
      </DateInput.Entry>
    </DateInput.Root>
  );
});

When the disabled prop is set to true, all segments become non-editable while still displaying their values.

Toggling Disabled State

You can dynamically toggle the disabled state of the Date Input.

My date input

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";

import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  const isDisabled = useSignal(false);

  return (
    <div class="date-input-container">
      <DateInput.Root class="date-input-root-col">
        <DateInput.Label>My date input</DateInput.Label>
        <DateInput.Entry disabled={isDisabled.value} date="1998-11-01" separator="/">
          <DateInput.Month />
          <DateInput.Day />
          <DateInput.Year />
        </DateInput.Entry>
      </DateInput.Root>

      <div class="date-input-button-container">
        <button
          onClick$={() => (isDisabled.value = !isDisabled.value)}
          type="button"
          class="toggle-disabled-button"
        >
          Toggle disabled
        </button>
      </div>
    </div>
  );
});

// example styles
import styles from "./date-input.css?inline";

This example shows how to toggle the disabled state using a signal, allowing you to enable or disable the input based on application logic.

Component State

Using Component State

The Date Input component provides several ways to control its state through props.

Initial Values

When no initial value is provided, all segments will display their placeholder text.

To set an initial date value, use the date prop on the <DateInput.Root> component. The simplest way to provide an initial value is to provide a string value in ISO format (YYYY-MM-DD).

<DateInput.Root date="2021-01-01">
  {/* ... */}
</DateInput.Root>

Controlling the Date Value

You can also use a variable such that any updates to your date value will be reflected in the input.

<DateInput.Root  date={selectedDate.value} >
  {/* ... */}
</DateInput.Root>

Alternatively, you can supply a Signal to the bind:date prop to create a two-way binding, where changes in the input are automatically reflected in the external state, and vice versa.

<DateInput.Root bind:date={selectedDate}>
  {/* ... */}
</DateInput.Root>

Disabled State

To prevent user interaction with the Date Input, use the disabled prop:

<DateInput.Root disabled={true}>
  {/* ... */}
</DateInput.Root>

The Disabled example demonstrates this feature, showing a Date Input with a fixed date that users cannot modify.

State Interactions

Responding to Date Changes

The Date Input provides an onChange$ handler that is called whenever the date changes, allowing you to respond to user input:

const handleChange$ = $((date: DateInput.ISODate | null) => {
  // Update external state or perform actions based on the new date
  selectedDate.value = date;
});

As shown in the Change example, you can use this handler to track changes and update external state.

Clearing the Date Value

You can clear the date value by setting it to null, which will reset all segments to their placeholder state:

<button onClick$={() => (selectedDate.value = null)}>
  Clear
</button>

This is demonstrated in both the Reactive and Value-Based examples, where a button is provided to clear the date.

Configuration Options

Date Format Configuration

Custom Date Formats

The Date Input component allows you to customize the date format by arranging the segments in any order and using different separators. This flexibility enables you to create date formats that match regional preferences or specific application requirements. As shown in the Format example above, you can create a European-style date format (DD.MM.YYYY) by arranging the segments in day-month-year order and using dots as separators:

<DateInput.Entry>
  <DateInput.Day showLeadingZero={true} />
  <DateInput.Separator separator="." />
  <DateInput.Month showLeadingZero={true} />
  <DateInput.Separator separator="." />
  <DateInput.Year />
</DateInput.Entry>

The component supports various date formats including:

American format (MM/DD/YYYY) as shown in the first example
ISO format (YYYY-MM-DD) as shown in the Basic example
European format (DD.MM.YYYY) as shown in the Format example

Segment Formatting

Leading Zeros

Each segment component (<DateInput.Day />, <DateInput.Month />, and <DateInput.Year />) accepts a showLeadingZero prop that controls whether single-digit values are displayed with a leading zero. This can be useful for maintaining consistent visual width across all possible values. As shown in the Value-Based example, you can apply this prop to both month and day segments:

<DateInput.Month showLeadingZero />
<DateInput.Day showLeadingZero />

When showLeadingZero is enabled:

A month value of 1 will display as "01"
A day value of 9 will display as "09" This prop is false by default for all segments.

Currently showLeadingZero has no effect on the year display.

Placeholder Text

Each segment component accepts a placeholder prop that allows you to customize the placeholder text shown when no value is entered:

<DateInput.Day placeholder="Day" />
<DateInput.Month placeholder="Month" />
<DateInput.Year placeholder="Year" />

The default placeholder values are:

"dd" for the day segment
"mm" for the month segment
"yyyy" for the year segment

Multiple dates

The Date Input can be composed with multiple <DateInput.Entry> components to create a multi-date input. You could use multiple <DateInput.Root> components, but if you have multiple dates that are related, with a single label, you can use a single <DateInput.Root> component with multiple <DateInput.Entry> components, as in the following Date Range example:

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";

import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);
  const departureDate = useSignal<DateInput.ISODate | null>(null);
  const returnDate = useSignal<DateInput.ISODate | null>(null);
  const formData = useSignal<Record<string, FormDataEntryValue>>();

  return (
    <form
      class="date-input-container"
      preventdefault:submit
      onSubmit$={(e) => {
        const form = e.target as HTMLFormElement;
        formData.value = Object.fromEntries(new FormData(form));
      }}
    >
      <DateInput.Root>
        <DateInput.Label>Travel dates</DateInput.Label>
        <div class="date-input-date-range">
          <DateInput.Entry bind:date={departureDate} data-range-start-entry separator="-">
            <DateInput.Year />
            <DateInput.Month showLeadingZero={true} />
            <DateInput.Day showLeadingZero={true} />
            <DateInput.HiddenInput name="departure-date" />
          </DateInput.Entry>
          <span>to</span>
          <DateInput.Entry bind:date={returnDate} data-range-end-entry separator="-">
            <DateInput.Year />
            <DateInput.Month showLeadingZero={true} />
            <DateInput.Day showLeadingZero={true} />
            <DateInput.HiddenInput name="return-date" />
          </DateInput.Entry>
        </div>
      </DateInput.Root>

      <p>
        Departure date: <span class="external-value">{departureDate.value}</span>
        <br />
        Return date: <span class="external-value">{returnDate.value}</span>
      </p>
      <div class="date-input-button-container">
        <button
          onClick$={() => (departureDate.value = "2001-01-01")}
          type="button"
          class="set-value-button"
        >
          Set departure to 2001-01-01
        </button>
        <button
          onClick$={() => (departureDate.value = null)}
          type="button"
          class="set-null-button"
        >
          Clear departure
        </button>
        <button
          onClick$={() => (returnDate.value = "2099-12-31")}
          type="button"
          class="set-value-button"
        >
          Set return to 2099-12-31
        </button>
        <button
          onClick$={() => (returnDate.value = null)}
          type="button"
          class="set-null-button"
        >
          Clear return
        </button>
        <button type="submit" class="submit-button">
          Submit
        </button>
      </div>
      {formData.value && (
        <div class="submitted-data">
          Submitted: {JSON.stringify(formData.value, null, 2)}
        </div>
      )}
    </form>
  );
});

// example styles
import styles from "./date-input.css?inline";

Technical Constraints

Date Range Limitations

The Date Input component enforces the following constraints on segment values:

Year: Values between 0 and 10000
Month: Values between 1 and 12
Day: Values between 1 and the last day of the selected month/year The day segment's maximum value is dynamically adjusted based on the selected month and year, accounting for variations in month length and leap years.

ISO Date Format

The component uses the ISO date format (YYYY-MM-DD) for its internal value representation. When providing a date via the date prop, it must be in this format:

<DateInput.Root date="2023-04-15">
  {/* ... */}
</DateInput.Root>

If an invalid format is provided, the component will throw an error.

The Date Input component provides comprehensive keyboard navigation between segments:

Tab/Shift+Tab: Moves focus between segments
Arrow keys: Navigate within and between segments
Numeric input: Automatically advances to the next segment when appropriate As shown in the Basic example, the component handles focus management automatically, moving to the next segment when a complete value is entered.

Form Integration

The Date Input component provides seamless integration with forms through the <DateInput.HiddenInput> component.

Basic Form Integration

To use the Date Input in a form, include the <DateInput.HiddenInput> component within the <DateInput.Entry> component.

<DateInput.Root>
  {/* ... */}
  <DateInput.Entry>
    {/* ... date segments ... */}
    <DateInput.HiddenInput name="appointment-date" />
  </DateInput.Entry>
</DateInput.Root>

This creates a hidden native input field that will be included in the form data when the form is submitted.

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { DateInput } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const formData = useSignal<Record<string, FormDataEntryValue>>();

  return (
    <form
      preventdefault:submit
      onSubmit$={(e) => {
        const form = e.target as HTMLFormElement;
        formData.value = Object.fromEntries(new FormData(form));
      }}
      class="date-input-container"
    >
      <DateInput.Root>
        <DateInput.Label>Appointment Date</DateInput.Label>
        <DateInput.Entry separator="/">
          <DateInput.Month />
          <DateInput.Day />
          <DateInput.Year />
          <DateInput.HiddenInput name="appointment-date" />
        </DateInput.Entry>
      </DateInput.Root>
      <div class="date-input-button-container">
        <button type="submit" class="submit-button">
          Submit
        </button>
      </div>
      {formData.value && (
        <div class="submitted-data">
          Submitted: {JSON.stringify(formData.value, null, 2)}
        </div>
      )}
    </form>
  );
});

// example styles
import styles from "./date-input.css?inline";

In this example:

The name attribute on <DateInput.HiddenInput> specifies the field name that will appear in the form data
The Date Input's value is automatically included in form submissions
The submitted data is displayed after form submission, showing the date in ISO format (YYYY-MM-DD)

Note that the <DateInput.HiddenInput> must be slotted within a <DateInput.Entry> component in order to properly access the date value from the entry's context.

Required Fields

The required attribute can be applied to make the date field mandatory in form submissions:

<DateInput.HiddenInput name="appointment-date" required={true} />

Form Value Handling

The <DateInput.HiddenInput> component automatically uses the current date value from the Date Input context. When the form is submitted, the date is included in the ISO format (YYYY-MM-DD). As shown in the Form example above, the submitted data includes the date value with the specified field name:

{ "appointment-date": "2022-02-14" }

Custom Form Handling

For more control over form submission, you can combine the Date Input with custom form handling logic:

<form
  preventdefault:submit
  onSubmit$={(e) => {
    const form = e.target as HTMLFormElement;
    const formData = Object.fromEntries(new FormData(form));
    // Process form data
  }}
>
  <DateInput.Root>
    {/* ... */}
    <DateInput.Entry>
      {/* ... date segments ... */}
      <DateInput.HiddenInput name="date-field" />
    </DateInput.Entry>
  </DateInput.Root>
  <button type="submit">Submit</button>
</form>

This approach allows you to intercept the form submission and process the data before sending it to a server or performing other actions.

Environment Considerations

The Date Input component is designed to work seamlessly in both server-side rendering (SSR) and client-side rendering (CSR) environments, as is standard for Qwik components.

API Reference

Accessibility

Keyboard Interactions

Key	Description
ArrowUp	When focus is on a segment, increments the value of that segment
ArrowDown	When focus is on a segment, decrements the value of that segment
ArrowLeft	Moves cursor left within the current segment or to the previous segment as appropriate
ArrowRight	Moves cursor right within the current segment or to the next segment as appropriate
Tab	Moves focus to the next segment or element
Shift + Tab	Moves focus to the previous segment or element
Digits (0-9)	When focus is on a segment, inputs numeric values into that segment
Backspace	When focus is on a segment, allows deleting characters
Delete	When focus is on a segment, allows deleting characters

Date Input

Features

Examples

Basic Usage

Visual Features

Custom Date Formats

Leading Zeros

Separators

Advanced Usage

Form Integration

Reactive Binding

Value-Based One-Way Data Binding

Observing Changes at the Root Level

Disabled State

Toggling Disabled State

Component State

Using Component State

Initial Values

Controlling the Date Value

Disabled State

State Interactions

Responding to Date Changes

Clearing the Date Value

Configuration Options

Date Format Configuration

Custom Date Formats

Segment Formatting

Leading Zeros

Placeholder Text

Multiple dates

Technical Constraints

Date Range Limitations

ISO Date Format

Keyboard Navigation

Form Integration

Basic Form Integration

Required Fields

Form Value Handling

Custom Form Handling

Environment Considerations

API Reference

Accessibility

Keyboard Interactions