Datepicker

Overview

Datepickers allow users to select a specific date. Users can input dates either by typing on the field or by selecting from the dropdown calendar.

When to use:

  • Use a Datepicker when the user need to input a specific date. It works best when the user need to pick a date close to the present time or the exact date is known by the user.

Implementation

Use to select a single date from the calendar.

Edit the code below to see your changes live!

function Example() {
  const [date, setDate] = useState<string>();

  return (
    <Form>
      <FormGroup>
        <Datepicker
          label="Pick a date"
          locale="en-US"
          max="06/19/2020"
          min="06/03/2020"
          onDateChange={(value: string) => setDate(value)}
          value={date}
        />
      </FormGroup>
    </Form>
  );
}

Props

Supports all native <input[type="date"] /> element attributes.

Prop name
Type
Default
Description
onDateChange *(date: string) => void

Callback called with value of selected date.

labelstring

Adds a label to the field.

valuestring

The ISO time that should be used as the input value.

maxstring

Maximum date in ISO format that can selected in the calendar.

minstring

Minimum date in ISO format that can selected in the calendar.

dateFormatstringEE, dd MMM, yyyy

Format for selected date to be displayed in input.

localestringen-US

Locale used to format the the date and calendar. See DateTimeFormat

Props ending with * are required

Do's and Don'ts

Do
The selectable dates in the dropdown calendar should be suitable for the context. Use min and max dates to help prevent user error.
Datepicker works best when the user need to pick a date in the near future (or past) or the exact date is known by the user. If a user needs to input a far distant date, consider having the dropdown calendar default open to a more convenient day.
Spell out the name of the month to distinguish it from the day.
Don't
Don’t enable dates that are erroneous in the context, for example, don’t enable dates in the past when users are planning a campaign, and don't enable a date that is prior to the start date in the end date picker.