React Ant 设计为什么禁用今天后几天的某些小时和分钟？

Question

为什么禁用今天之后几天的某些小时和分钟？

你好。 我正在使用 antdesign 日期选择器。 我写了一个function。作为未来的日期，只能在今天之后3分钟取一个日期。 日期不应早于当前时间。 我设置了这个。 但我只想为今天设置此规则。 我怎样才能取消其他日子的这条规则。

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

我认为如果你分开你的输入并这样做对你来说会更容易：

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