NOTE: all date components expect their value to be an ISO 8601 date string (without the time signature), which follows the format yyyy-mm-dd

Alternatives

The kind of date (exact, approximate, memorable) you are requesting from the user will determine which component is best to use.

DateInput — When the date is memorable or distant, such as a date of birth

DatePicker

Allows the user to view, type and pick dates from a calendar.

Edit in Playroom

const [value, setValue] = useState();
return (
  <Field label="Pay date">
    <DatePicker
      label="Pay date"
      value={value}
      onChange={setValue}
      onClear={() => setValue(undefined)}
      disabled
    />
  </Field>
);

size

There are two options for the size, "medium" is the default.

Edit in Playroom

const [value, setValue] = useState();
return (
  <Stack gap="large">
    <Field label="Medium (default)">
      <DatePicker
        size="medium"
        value={value}
        onChange={setValue}
        onClear={() => setValue(undefined)}
      />
    </Field>
    <Field label="Small">
      <DatePicker
        size="small"
        value={value}
        onChange={setValue}
        onClear={() => setValue(undefined)}
      />
    </Field>
  </Stack>
);

disabled

Disables the input.

Calendar props

The date picker implements react-day-picker under the hood. A subset of the API is available to influence the calendar appearance and behaviour:

disabledDays
modifiers
initialMonth
fromMonth
toMonth

Edit in Playroom

const [value, setValue] = useState();
const today = new Date();
return (
  <Field label="Pay date">
    <DatePicker
      disabledDays={{ before: today }}
      fromMonth={today}
      value={value}
      onChange={setValue}
      onClear={() => setValue(undefined)}
    />
  </Field>
);

Notice that we're disallowing selection of days prior to today using the disabledDays property. We're also disabling navigation to months prior to today using fromMonth because they would not be selectable.

DateRangePicker

The range picker functions much like the DatePicker except it lets the user select or type a date range.

Edit in Playroom

const [value, setValue] = useState();
return (
  <Field label="Pay period">
    <DateRangePicker
      value={value}
      onChange={setValue}
      onClear={() => setValue(undefined)}
    />
  </Field>
);

Size

The DateRangePicker accepts the same "size" property as the DatePicker.

disabled

Disables the input.

Keyboard shortcuts

t

Selects todays date.

CalendarPicker

A simple version of the DatePicker meant to be used for UIs that require filtering instead of forms. It does not have text input.

Edit in Playroom

const [value, setValue] = useState(new Date());
return (
  <CalendarPicker
    label={`Pay date ${value ? `: ${new Date(value).toDateString()}` : ''}`}
    size="small"
    value={value}
    onChange={setValue}
    onClear={() => {
      return setValue(undefined);
    }}
  />
);

CalendarPicker

A simple version of the DateRangePicker meant to be used for UIs that require filtering instead of forms. It does not have text input.

Edit in Playroom

const [value, setValue] = useState<
    | {
        start?: undefined | ISODate;
        end?: undefined | ISODate;
      }
    | undefined
  >(undefined);
  return (
    <CalendarRangePicker
      label={`Pay period ${
        value?.start ? `: ${new Date(value.start).toDateString()} - ` : ''
      } ${value?.end ? `${new Date(value.end).toDateString()}` : ''}`}
      size="small"
      value={value}
      onChange={setValue}
      onClear={() => {
        return setValue(undefined);
      }}
    />
  );

Date Picker

DatePicker

size

disabled

Calendar props

DateRangePicker

Size

disabled

Keyboard shortcuts

t

CalendarPicker

CalendarPicker