No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.



Timeslot
dailyTimePair
It take a object of array, e.g. [{startTime: [10, 0], endTime: [12, 0]}] - [hour, min]
 
October2025
S
M
T
W
T
F
S
import {DateSlotPicker} from 'react-dateslot-picker';
import 'react-dateslot-picker/dist/style.css'

const Example  = () => {

  const props = {
    dailyTimePair: {[{
      startTime: [10, 0],
      endTime: [12, 0]
    }, {
      startTime: [14, 0],
      endTime: [23, 59]
    }]}
  };

  return (
    <DateSlotPicker
      {...props}
    />
  )
};


fullBooking
Disable a timeslot
April2023
S
M
T
W
T
F
S
import {DateSlotPicker} from 'react-dateslot-picker';
import 'react-dateslot-picker/dist/style.css'

const Example  = () => {

  const props = {
    currentDate: 1680321600000
    fullBooking: [1680804000000] // Thu Apr 06 2023 18:00:00 GMT+0000
  };

  return (
    <DateSlotPicker
      {...props}
    />
  )
};


Duration
Each section of timeslot
October2025
S
M
T
W
T
F
S
import {DateSlotPicker} from 'react-dateslot-picker';
import 'react-dateslot-picker/dist/style.css'

const Example  = () => {

  const props = {
    duration: 60  // 60 mins
  };

  return (
    <DateSlotPicker
      {...props}
    />
  )
};


onSelectDatetime
October2025
S
M
T
W
T
F
S
import {DateSlotPicker} from 'react-dateslot-picker';
import 'react-dateslot-picker/dist/style.css'

const Example  = () => {

  const props = {
    onSelectDatetime: (timestamp: number) => {console.log(timestamp)}
  };

  return (
    <DateSlotPicker
      {...props}
    />
  )
};