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" />
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. |