Date Field

Date components are used to display past, present, or future dates. The kind of date (exact, approximate, memorable) you are requesting from the user will determine which component is best to use.

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

Date Field

The DateField component has been deprecated and will be removed in a future version. Use Field and DateInput instead.

- <DateField
-   label="Field label"
-   onChange={handleInputChange}
-   value={inputValue}
- />
+ <Field label="Field label">
+   <DateInput
+     onChange={handleInputChange}
+     value={inputValue}
+   />
+ </Field>

Use if the date can be remembered by the user easily, such as a date of birth, and they don’t need a calendar to anticipate the dates.

const [value, setValue] = useState();
return (
  <>
    <DateField label="Date of birth" value={value} onChange={setValue} />
    <pre>{value || ' '}</pre>
  </>
);

Date Picker

The DatePickerField component has been deprecated and will be removed in a future version. Use Field and DatePicker instead.

- <DatePickerField
-   label="Field label"
-   onChange={handleInputChange}
-   value={inputValue}
- />
+ <Field label="Field label">
+   <DatePicker
+     onChange={handleInputChange}
+     value={inputValue}
+   />
+ </Field>

Use a calendar picker when the user needs to know a date’s relationship to other days or when a date could be variable. It allows the user to view and pick dates from a calendar widget.

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

Size

There are three options for the size of the DatePicker input, "medium" is the default.

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

Weight

Default weight is "subtle". For use in data-dense interfaces you can apply a weight of "none" to hide the "chrome" of the input until the user interacts with it, on hover or focus.

const [value, setValue] = useState();
return (
  <Stack gap="small">
    <DatePicker
      weight="none"
      label="None"
      value={value}
      onChange={setValue}
      onClear={() => setValue(undefined)}
    />
  </Stack>
);

Calendar

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

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

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.

Range Picker

The DateRangePickerField component has been deprecated and will be removed in a future version. Use Field and DateRangePicker instead.

- <DateRangePickerField
-   label="Field label"
-   onChange={handleInputChange}
-   value={inputValue}
- />
+ <Field label="Field label">
+   <DateRangePicker
+     onChange={handleInputChange}
+     value={inputValue}
+   />
+ </Field>

The date range picker functions much like the single date picker but instead of choosing just one date the user can choose a start and end date.

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

Size

There are three options for the size of the DateRangePicker input, "medium" is the default.

const [value, setValue] = useState();
return (
  <Stack gap="small">
    <DateRangePicker
      size="xsmall"
      label="Xsmall"
      value={value}
      onChange={setValue}
    />
    <DateRangePicker
      size="small"
      label="Small"
      value={value}
      onChange={setValue}
    />
    <DateRangePicker
      size="medium"
      label="Medium"
      value={value}
      onChange={setValue}
    />
  </Stack>
);

Weight

Default weight is "subtle". For use in data-dense interfaces you can apply a weight of "none" to hide the "chrome" of the input until the user interacts with it, on hover or focus.

const [value, setValue] = useState();
return (
  <Stack gap="small">
    <DateRangePicker
      weight="none"
      label="None"
      value={value}
      onChange={setValue}
    />
  </Stack>
);