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' />

Common input field features

DatePicker includes all Text Field and shared input field features.

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>
);

Docs