Antd Datepicker - Disable times on specific days

user_12471751 0
Viewed 70

Im trying to disable times for specific days in an antd datetimepicker.

Is it at all possible to have an array of dates like this

  const disabledDates = [
    "2020-10-17 13:00",
    "2020-10-17 14:30"
  ]

and disable the times only on those days? heres the datepicker currently

        <DatePicker
          inputReadOnly={true}
          showNow={false}
          showTime={true}
          disabledDate={disablePast}
          disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 20, 21, 22, 23]}
          disabledSeconds={() => disabledSec}
          hideDisabledOptions={true}
          minuteStep={30}
        />
antd datetimepicker
1 Answers

I guess you have already found the solution to this, but the way it is implemented currently is by using the disabledTime function. It should return an object with 3 other functions that return what you suggest:

const disabledTime = () => ({
  disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 8, 20, 21, 22, 23],
  disabledMinutes: () => [30, 60],
  disabledSeconds: () => [55, 56],
});

So that your component looks like

<DatePicker
   format="YYYY-MM-DD HH:mm:ss"
   disabledTime={disabledDateTime}
/>

You can find the complete sample in AntD documentation.

user_18125930
Related