DatePicker

DatePicker lets users select a date.

Basic usage

const Demo = () => {
  const [date, setDate] = useState<Date | undefined>();

  return <DatePicker value={date} onChange={setDate} />;
};

Variant

The DatePicker comes with two visual styles: default (default) and magicGradient.

<DatePicker variant="magicGradient" {...otherProps} />

Set a maximum and minimum date

Use minDate to set the earliest date allowed by the input and maxDate for the latest date allowed by the input.

const Demo = () => {
  const minDate = new Date(2020, 0, 4);
  const maxDate = new Date(2020, 0, 25);
  const [date, setDate] = useState<Date | undefined>(new Date(2020, 0, 15));

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      minDate={minDate}
      maxDate={maxDate}
    />
  );
};