Date picker

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

Usage
Code

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

Types

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.

Date picker

For selecting single date value.

Date picker

Date range picker

For selecting a date range.

Date range picker

Structure



Date picker is built up using calendar and popover components. Unlike calendar, which can be displayed upfront, a trigger is always needed for the date picker such as inputs.

Structure of date picker
PropertyValue(s)
Size
  • 292x212 px (Small)
  • 372x316 px (Regular)

  • Configurations



    PropertyValue(s)Default value
    View
  • Month
  • Year
  • Decade
  • Month
    Size
  • Small
  • Regular
  • Regular

    Usage


    Triggers

    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.

    Using preset values

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

    Using preset values Using preset 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.

    Preset values inside popover Preset values inside popover

    Using single input for a date range

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

    Using date and time picker together

    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.

    Date and time picker together Date and time picker together

    Selecting day of the week or time of day

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

    Selection chips to select day od the week or time of day Selection chips to select day of the week or time of day