TimeSlotPicker

An interactive component to select a single time slot.

The framing is up to you, considering the options that are support by the design system spacings.

Time slot selection

as Inline

<Spacings.Inline>
  <TimeSlotPicker
    selectedTimeSlot={{
      start: new Date("2024-07-24T10:30:00"),
      end: new Date("2024-07-24T11:00:00"),
    }}
    timeSlots={[
      {
        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"),
      },
    ]}
    onTimeSlotSelect={(timeSlot) => alert(timeSlot.start.toLocaleTimeString())}
  />
</Spacings.Inline>

Time slot with duration

as a Stack

<Spacings.Stack>
  <TimeSlotPicker
    selectedTimeSlot={{
      start: new Date("2024-07-24T10:30:00"),
      end: new Date("2024-07-24T11:00:00"),
    }}
    timeSlots={[
      {
        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"),
      },
    ]}
    shouldDisplayDuration={true}
    onTimeSlotSelect={(timeSlot) => alert(timeSlot.start.toLocaleTimeString())}
  />
</Spacings.Stack>

Time slot with end time

<TimeSlotPicker
  selectedTimeSlot={{
    start: new Date("2024-07-24T10:30:00"),
    end: new Date("2024-07-24T11:00:00"),
  }}
  timeSlots={[
    {
      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"),
    },
  ]}
  shouldDisplayEndTime={true}
  onTimeSlotSelect={(timeSlot) => alert(timeSlot.start.toLocaleTimeString())}
/>

Props

type OnTimeSlotSelect = (timeSlot: TimeSlot) => void;

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