DateTimePicker

The DateTimePicker component is a combination of the Calendar and TimeSlotPicker components. It allows the user to select a date and time.

The state of the selected time slot is managed by the parent component, while the selected date is managed by the DateTimePicker component.

Usage

<DateTimePicker
  availableTimeSlots={[
    {
      start: new Date("2024-07-24T10:00:00"),
      end: new Date("2024-07-24T10:30:00"),
    },
    {
      start: new Date("2024-07-24T10:30:00"),
      end: new Date("2024-07-24T11:00:00"),
    },
    {
      start: new Date("2024-07-24T12:15:00"),
      end: new Date("2024-07-24T12:45:00"),
    },
    {
      start: new Date("2024-07-24T12:45:00"),
      end: new Date("2024-07-24T13:30:00"),
    },
    {
      start: new Date("2024-07-24T13:30:00"),
      end: new Date("2024-07-24T14:00:00"),
    },
    {
      start: new Date("2024-07-24T14:15:00"),
      end: new Date("2024-07-24T16:45:00"),
    },
    {
      start: new Date("2024-07-24T16:45:00"),
      end: new Date("2024-07-24T17:15:00"),
    },
    {
      start: new Date("2024-07-24T17:15:00"),
      end: new Date("2024-07-24T17:45:00"),
    },
  ]}
  onTimeSlotSelect={(timeSlot) => console.log(timeSlot)}
/>

Props

type TimeSlot = {
  start: Date;
  end: Date;
};

type OnDateSelect = (date: Date) => void;

type SwitchMonth = (
  newMonth: number,
  newYear: number,
  monthNames: string[],
) => string;