Entering Dates

In order to provide an accessible user experience, you should design and develop date picking experiences to use an Input rather than a Date Picker.

Calendar Picker vs. Input

Date Pickers

Date Pickers are most useful for scheduling applications, where the user is selecting an unknown date with the aid of calendar context. They primarily benefit sighted users using a pointing device or touchscreen and most importantly are not fully accessible.

Despite what many articles claim, Date Pickers cannot be made accessible either. To learn more about why you should avoid using a Date Picker we highly recommend you read the article:

Maybe You Don't Need a Date Picker.

Text Input

The text-based Input is accessible by default and is easier use in most cases where the user needs to enter a known date which applies to most applications and what we recommend using in Pando.

Please note we are specifically using the type="text" input element and not the type="date". This is because the date version of an input is (shockingly) not accessible.

Text Input for Date Entry

In Pando, we recommend using the text-based Input combined with the useAutoFormatDate hook for displaying a way to enter a date.

In this example, we are creating a DateInput component that can be used anywhere in your application.

function DateInput() {
  const formatOptions = useAutoFormatDate()

  return (
    <FormControlProvider>
      <Label htmlFor="date">Birthdate</Label>
      <Input
        describedBy="date:help"
        startIcon={CalendarIcon}
        {...formatOptions}
      />
      <FieldMessage id="date:help">
        Enter a date in the format of {formatOptions.placeholder}.
      </FieldMessage>
    </FormControlProvider>
  )
}