Date Picker
Date Picker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay.
<DatePicker label='Start date' />
Auto open
The overlay automatically opens when the field is focused with a click or a tap, and when typing a value in the input. This can be prevented, to have the overlay only open when the toggle button or the up/down arrow keys are pressed. The behavior 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.
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>
);