DatePicker

The DatePicker component is a customizable datepicker that allows the user to select a date. It includes features such as month navigation, holiday highlighting, and strike-through dates.

The DatePicker has multiple components that can be used depending on your needs. All components don’t expose the same properties, only the ones that are relevant for that type of DatePicker.

Component usage

DatePicker

This component should be used when you need a single day to be selected.

In this example, we’re rendering a DatePicker component with some initial props. The selectedDate prop specifies the currently selected date, while the onDateChange prop is a callback function that is called when the user selects a new date.

import { DatePicker } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const today = new Date();
  const strikeThroughDates = [
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2),
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 4),
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7),
  ];

  return (
    <DatePicker
      selectedDate={selectedDate}
      onDateChange={setSelectedDate}
      markSundayRed
      strikeThroughDates={strikeThroughDates}
    />
  );
}

⛶

DateWeekPicker

This component should be used when you need a week selected. The component still just takes a date as a property but graphically it will look like the entire week is selected, so the week logic has to be handled by the consumer.

import { DateWeekPicker } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  return (
    <DateWeekPicker
      selectedDate={selectedDate}
      onDateChange={setSelectedDate}
      markSundayRed
      canSelectPastDates={true}
    />
  );
}

⛶

DateRangePicker

This component should be used when you need a range of dates. It has a DateRange property that include a start date and end date.

import { DateRangePicker, type DateRange } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const startDate = new Date();
  const endDate = new Date(startDate);
  endDate.setDate(startDate.getDate() + 3);

  const [dateRange, setDateRange] = useState<DateRange>({
    startDate: startDate,
    endDate: endDate,
  });

  const handleRangeChange = (newDateRange: DateRange) => {
    setDateRange(newDateRange);
  };

  return (
    <DateRangePicker
      dateRange={dateRange}
      onRangeChange={handleRangeChange}
      markSundayRed
      canSelectPastDates={true}
    />
  );
}

⛶

DateMultiPicker

This component should be used when you need to select multiple specific (non-continuous) dates at once. It takes a selectedDates array and an onDatesChange callback. Clicking a date toggles it in or out of the selection, and each selected date is highlighted using the active date style.

import { DateMultiPicker } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const today = new Date();

  const [selectedDates, setSelectedDates] = useState<Date[]>([
    today,
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2),
    new Date(today.getFullYear(), today.getMonth(), today.getDate() + 3),
  ]);

  return (
    <DateMultiPicker
      selectedDates={selectedDates}
      onDatesChange={setSelectedDates}
      markSundayRed
      canSelectPastDates={true}
    />
  );
}

⛶

Other Props

To render the DatePicker responsively, it is recommended to wrap it in a container with a fixed width and height.

Other props that can be passed to the DatePicker component include:

• markSundayRed: If true, Sundays are highlighted in red.

• strikeThroughDates: An array of dates that should be strike-through (disabled) in the datepicker.