Date Input

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.

Usage

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 (
  <Stack gap="large">
    <Field label="Date of birth">
      <DateInput value={value} onChange={setValue} />
    </Field>
    <Stack gap="small">
      <Text size="small" weight="medium">
        Value
      </Text>
      {value ? (
        <Text>{value}</Text>
      ) : (
        <Text color="muted">not set, or not yet valid</Text>
      )}
    </Stack>
  </Stack>
);