components

DatePicker

DatePicker provides a calendar-based date selection experience. It supports single date, multiple date, date range, and week selection modes. The calendar is built on react-day-picker and renders inline. For a form-friendly variant that opens as a popover from an input trigger, use InputDate instead. Dates are passed and received as JavaScript Date objects. You can constrain the selectable range with fromDate and toDate, disable specific dates with the disabled prop (array, single Date, or predicate function), and control the initial visible month with defaultMonth.

Import

import { DatePicker, DatePickerRange } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Display an always-visible inline calendar for date selection.
+Select date ranges with a visual calendar.
+When the calendar should be part of the page layout, not a popover.

When not to use

−For compact form fields with a calendar popover — use InputDate.
−For time selection — use InputTime.
−For free-text date input — use InputText with validation.

Examples

Code Samples

Single Date Selection

The default DatePicker mode selects a single date. The selected date is highlighted in the calendar grid.

import { useState } from "react";
import { DatePicker } from "@skedulo/breeze-ui-react";

export default function SingleDatePicker() {
  const [date, setDate] = useState<Date | undefined>();

  return (
    <div>
      <DatePicker selected={date} onSelect={setDate} />
      {date && (
        <p className="mt-2 text-sm text-gray-600">
          Selected: {date.toLocaleDateString()}
        </p>
      )}
    </div>
  );
}

Date Range Selection

DatePickerRange lets users pick a start and end date. The range between them is visually highlighted.

import { useState } from "react";
import { DatePickerRange } from "@skedulo/breeze-ui-react";

export default function RangePicker() {
  const [range, setRange] = useState<{ from: Date; to?: Date } | undefined>();

  return (
    <div>
      <DatePickerRange selected={range} onSelect={setRange} />
      {range?.from && range?.to && (
        <p className="mt-2 text-sm text-gray-600">
          {range.from.toLocaleDateString()} — {range.to.toLocaleDateString()}
        </p>
      )}
    </div>
  );
}

With Constraints

Use fromDate and toDate to restrict the selectable range. Here, only the next 30 days are available.

import { useState } from "react";
import { DatePicker } from "@skedulo/breeze-ui-react";

export default function ConstrainedPicker() {
  const [date, setDate] = useState<Date | undefined>();
  const today = new Date();
  const thirtyDaysLater = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);

  return (
    <DatePicker
      selected={date}
      onSelect={setDate}
      fromDate={today}
      toDate={thirtyDaysLater}
    />
  );
}

Guidelines

Do

✓Use fromDate/toDate to constrain selectable dates.
✓Use DatePickerRange for start-end date selection.
✓Use weekStartsOn to match locale conventions.

Don't

✗Don't show both DatePicker and InputDate for the same field.
✗Don't leave date ranges unbounded when business rules exist.

API Reference

Prop	Type	Default	Description
selected	Date \| Date[] \| DateRange \| WeekRange	—	The currently selected date(s). Type depends on the picker variant.
onSelect*	(value) => void	—	Callback when the user selects a date. The argument type matches the selected prop.
disabled	Date \| Date[] \| ((date: Date) => boolean)	—	Dates that cannot be selected. Pass a single Date, an array, or a predicate function.
fromDate	Date	—	Earliest selectable date. Days before this are disabled.
toDate	Date	—	Latest selectable date. Days after this are disabled.
defaultMonth	Date	—	The month the calendar displays on first render.
weekStartsOn	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	0	Day of the week to start on (0 = Sunday, 1 = Monday, etc.).
showOutsideDays	boolean	false	Show days from the previous and next months in the grid.
isClearable	boolean	false	Show a clear button in the footer to deselect the date.
captionLayout	"dropdown" \| "dropdown-buttons" \| "buttons"	"buttons"	Layout of the month/year navigation. Use dropdown for quick jumping across months and years.
timezone	string	—	IANA timezone string used for computing 'today' styling (e.g. 'Australia/Brisbane').
footer	ReactNode	—	Custom content rendered below the calendar grid.

Related Components

InputDate InputTime