React Ant design Why are certain hours and minutes of days after today disabled?

Question

Why are certain hours and minutes of days after today disabled?

Hello. I am using antdesign datepicker. I wrote a function. As a future date, a date can only be taken 3 minutes after today. The date should not be taken before the current time. i set this up. but I want to set this rule for today only. How can I cancel this rule for other days.

function getDisabledHours() {
  var hours = [];
  for (let i = 0; i < moment().hour(); i++) {
    hours.push(i);
  }

  return hours;
}

function getDisabledMinutes() {
  var minutes = [];
  for (var i = 0; i - 3 < moment().minute(); i++) {
    minutes.push(i);
  }
  return minutes;
}

  <DatePicker
      onChange={(d, v) => {
        setStartTime(d, v);
      }}
      placeholder="Select Start Time"
      format="YYYY-MM-DD HH:mm"
      disabledDate={disabledDate}
      disabledHours={getDisabledHours}
      disabledMinutes={getDisabledMinutes}
      showSecond={false}
      //   disabledSeconds={getDisabledSeconds}
      showTime={{ defaultValue: moment(true, "HH:mm") }}
      suffixIcon={DateIcon}
  />

Answer 1

I think it will be easier for you if you separate your inputs and do like this:

import React, { useState } from "react"
import moment from "moment"
import { DatePicker, TimePicker } from "antd"

const Example = () => {
    const [startDate, setStartDate] = useState()
    const [startTime, setStartTime] = useState()

    const disabledDate = (current) => {
        return current && current <= moment().startOf("day")
    }

    const range = (start, end) => {
        const result = []
        for (let i = start; i < end; i++) {
            result.push(i)
        }
        return result
    }

    const disabledTime = (current) => {
        const now = moment()
        if (current.isSame(startDate, "day")) {
            return {
                disabledHours: () => range(0, now.get("hours")),
                disabledMinutes: () => range(0, now.get("minutes") + 3),
            }
        } else {
            return {
                disabledHours: () => [],
                disabledMinutes: () => [],
            }
        }
    }

    return (
        <>
            <DatePicker
                onChange={(date) => setStartDate(date)}
                placeholder="Select Start Date"
                format="YYYY-MM-DD"
                disabledDate={disabledDate}
            />
            <TimePicker
                onChange={(time) => setStartTime(time)}
                format="HH:mm"
                disabled={startDate === undefined}
                disabledTime={disabledTime}
            />
        </>
    )
}

export default Example