Date Picker

The DatePicker component shows a configurable calendar view and allows the user to select a date from it.

Non-Polymorphic Component

Unlike most Squeeze components, the DatePicker is not polymorphic and doesn't accept an as prop. It is rendered inside of a <div>.

Examples

Single Date

Note: if you don't specify a mode prop, you need to supply a type to the component so Typescript knows which versions of selected and onSelect will be used. Ex: <DatePicker<'single'> ... />

November

2024

Su	Mo	Tu	We	Th	Fr	Sa

import { useState } from 'react';
import { DatePicker } from '@curology/ui-components-web/react/DatePicker';

export const ControlledSingleDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  return (
    <DatePicker<'single'>
      selected={selectedDate}
      onSelect={(date) => setSelectedDate(date)}
    />
  );
};

Multiple Dates

November

2024

Su	Mo	Tu	We	Th	Fr	Sa

import { useState } from 'react';
import { addDays } from 'date-fns';
import { DatePicker } from '@curology/ui-components-web/react/DatePicker';

export const ControlledMultipleDatePicker = () => {
  const [selectedDates, setSelectedDates] = 
    useState<Date[]>([new Date(), addDays(new Date(), 2)]);

  return (
    <DatePicker
      {...props}
      mode="multiple"
      selected={selectedDates}
      onSelect={(dates) => setSelectedDates(dates || [])}
    />
  );
};

Range of Dates

November

2024

Su	Mo	Tu	We	Th	Fr	Sa

import { useState } from 'react';
import { addDays } from 'date-fns';
import { DatePicker } from '@curology/ui-components-web/react/DatePicker';

export const ControlledRangeDatePicker = () => {
   const [range, setRange] = 
    React.useState<DateRange | undefined>({
      from: new Date(),
      to: addDays(new Date(), 4),
    });

  return (
    <DatePicker
      {...props}
      mode="range"
      selected={range}
      onSelect={(date) => setRange(date)}
    />
  );
};

Disable Weekends

November

2024

Su	Mo	Tu	We	Th	Fr	Sa

<DatePicker disabled={{ dayOfWeek: [0, 6] }} />

Props

DatePickerProps

Name	Type	Default Value	Required	Description
See the React Daypicker documentation for a full list of props that can be passed to this component.
required	false | true	false as R	No	Whether the selection is required. @see https://daypicker.dev/docs/selection-modes