Date Picker

Date Picker is an input field that allows the user to enter a date, or select one from a calendar overlay.

<DatePicker label="Start date" />

Common Input Field Features

DatePicker includes all Text Field and shared input field features.

Auto Open

The overlay opens automatically when the field is focused with a click or a tap, and when typing a value in the input field. This can be prevented so that the overlay opens only when the toggle button or the up/down arrow keys are pressed. The behavior, though, isn’t affected on touch devices.

<DatePicker label="Start date" autoOpenDisabled />

Usage Patterns

Date Range

You can create a date range picker using two Date Pickers: One for a start date and one for an end date. In the code example here, one Date Picker is for setting a departure date — perhaps for an airline booking site — and another for a return date.

const [departureDate, setDepartureDate] = useState("");
const [returnDate, setReturnDate] = useState("");

return (
  <HorizontalLayout theme="spacing">
    <DatePicker
      label="Departure date"
      onValueChanged={({ detail: { value } }) => setDepartureDate(value)}
      max={returnDate}
    />
    <DatePicker
      label="Return date"
      onValueChanged={({ detail: { value } }) => setReturnDate(value)}
      min={departureDate}
    />
  </HorizontalLayout>
);

Important

You can find more information in the corresponding article on vaadin.com.

Docs