Date picker

Date picker is used for selecting or entering a date value.

Date picker lets users select or directly enter date values. It can either be a single date or a date range.

Date picker comes in two types - one for selecting single date value called date picker and another for selecting a date range aptly called date range picker.

For selecting single date value.

For selecting a date range.

One obvious expectation from a date picker is the ability to input values using a keyboard e.g. when a user has to enter the date of birth. Getting the desired date is much quicker this way as users do not have to go through the calendar select the desired value. Therefore, use inputs to trigger the date picker.

Use selection chips to give quick selection of preset date/date-range values.

If there is a space crunch, you can have these preset values in the popover itself. But this defeats the purpose of quick selection since the users will have to open the popover to access them. Hence, make sure to use this only when there is no option left.

If there is a space crunch, you can have a single input for entering/selecting a date range.

As soon as a date or date range is selected, time picker dropdown should be triggered so that users can select the time without any additional click.

Use selection chips for selecting day of the week or time of day.