Skip to main content
Kaleidoscope

DatePicker

TZ

A calendar component for selecting a single date or a date range

Default

A basic single-date picker. Past dates are disabled by default.

Editable example
() => {
  const [startDate, selectStartDate] = React.useState(undefined);

  return (
    <Card>
      <div className="space-inset-m">
        <DatePicker
          singleSelect={true}
          selectStartDate={selectStartDate}
          startDate={startDate}
        />
      </div>
    </Card>
  );
}

Best practices

  1. Use singleSelect={true} when only one date is needed (e.g. a due date)
  2. Use range selection when the user needs to define a time period (e.g. a reporting window)
  3. Set minDate and maxDate to constrain the selectable range when not all dates are valid

Allow past date selection

Set allowPastSelection to let users pick dates before today.

Editable example
() => {
  const [startDate, selectStartDate] = React.useState(undefined);

  return (
    <Card>
      <div className="space-inset-m">
        <DatePicker
          singleSelect={true}
          selectStartDate={selectStartDate}
          startDate={startDate}
          allowPastSelection
        />
      </div>
    </Card>
  );
}

Range selection

Set singleSelect={false} and provide endDate/selectEndDate to enable date range selection. The first click sets the start date, and the second click sets the end date.

Editable example
() => {
  const [startDate, selectStartDate] = React.useState(undefined);
  const [endDate, selectEndDate] = React.useState(undefined);

  return (
    <Card>
      <div className="space-inset-m">
        <DatePicker
          singleSelect={false}
          selectStartDate={selectStartDate}
          startDate={startDate}
          endDate={endDate}
          selectEndDate={selectEndDate}
        />
      </div>
    </Card>
  );
}

Constrained date range

Use minDate and maxDate to restrict which dates can be selected. Dates outside the range are shown as disabled.

Editable example
() => {
  const [startDate, selectStartDate] = React.useState(undefined);
  const [endDate, selectEndDate] = React.useState(undefined);

  const now = new Date();
  const minDate = { year: now.getFullYear(), month: now.getMonth(), day: 1 };
  const maxDate = { year: now.getFullYear(), month: now.getMonth() + 2, day: 28 };

  return (
    <Card>
      <div className="space-inset-m">
        <DatePicker
          singleSelect={false}
          selectStartDate={selectStartDate}
          startDate={startDate}
          endDate={endDate}
          selectEndDate={selectEndDate}
          minDate={minDate}
          maxDate={maxDate}
        />
      </div>
    </Card>
  );
}

Day-only selection

Set onlyAllowDaySelection to show a simple 1-31 day grid without month/year navigation. Useful when only the day of the month matters (e.g. recurring monthly events).

Editable example
() => {
  const [startDate, selectStartDate] = React.useState(undefined);

  return (
    <Card>
      <div className="space-inset-m">
        <DatePicker
          singleSelect={true}
          selectStartDate={selectStartDate}
          startDate={startDate}
          onlyAllowDaySelection={true}
        />
      </div>
    </Card>
  );
}