Javascript 如何在功能组件中使用react datepicker的excludeTimes和onChange？

它说的错误是：

未定义ReferenceError设置小时数

这些是代码。另外，如何为react datePicker使用onChange值？多谢各位

import "./styles.css";
import React, { useState } from "react";
import DatePicker from "react-datepicker";

// import required css from library
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        showTimeSelect
        minDate={new Date()}
        excludeTimes={[
          setHours(setMinutes(new Date(), 0), 17),
          setHours(setMinutes(new Date(), 30), 17),
          setHours(setMinutes(new Date(), 30), 18),
          setHours(setMinutes(new Date(), 0), 18),
          setHours(setMinutes(new Date(), 30), 19),
          setHours(setMinutes(new Date(), 0), 19),
          setHours(setMinutes(new Date(), 30), 19),
          setHours(setMinutes(new Date(), 0), 20),
          setHours(setMinutes(new Date(), 30), 20),
          setHours(setMinutes(new Date(), 0), 21),
          setHours(setMinutes(new Date(), 30), 21),
          setHours(setMinutes(new Date(), 0), 22),
          setHours(setMinutes(new Date(), 30), 22),
          setHours(setMinutes(new Date(), 0), 23),
          setHours(setMinutes(new Date(), 30), 23),
          setHours(setMinutes(new Date(), 0), 24),
          setHours(setMinutes(new Date(), 30), 24),
          setHours(setMinutes(new Date(), 0), 1),
          setHours(setMinutes(new Date(), 30), 1),
          setHours(setMinutes(new Date(), 0), 2),
          setHours(setMinutes(new Date(), 30), 2),
          setHours(setMinutes(new Date(), 0), 3),
          setHours(setMinutes(new Date(), 30), 3),
          setHours(setMinutes(new Date(), 0), 4),
          setHours(setMinutes(new Date(), 30), 4),
          setHours(setMinutes(new Date(), 0), 5),
          setHours(setMinutes(new Date(), 30), 5),
          setHours(setMinutes(new Date(), 0), 6),
          setHours(setMinutes(new Date(), 30), 6),
          setHours(setMinutes(new Date(), 0), 7),
          setHours(setMinutes(new Date(), 30), 7),
          setHours(setMinutes(new Date(), 0), 8),
          setHours(setMinutes(new Date(), 30), 8),
        ]}
      />
    </div>
  );
}

导入“/styles.css”； 从“React”导入React，{useState}； 从“反应日期选择器”导入日期选择器； //从库中导入所需的css 导入“react datepicker/dist/react datepicker.css”； 导出默认函数App（）{ const[startDate，setStartDate]=useState（新日期（））； 返回( 你好，代码沙盒 开始编辑，看看神奇的发生！ 设置开始日期（日期）} showTimeSelect minDate={new Date（）} 排除时间={[ 设置小时（设置分钟（新日期（），0），17）， 设定小时（设定分钟（新日期（），30），17）， 设置小时（设置分钟（新日期（），30），18）， 设置小时（设置分钟（新日期（），0），18）， 设置小时（设置分钟（新日期（），30），19）， 设置小时（设置分钟（新日期（），0），19）， 设置小时（设置分钟（新日期（），30），19）， 设置小时（设置分钟（新日期（），0），20）， 设置小时（设置分钟（新日期（），30），20）， 设置小时（设置分钟（新日期（），0），21）， 设置小时（设置分钟（新日期（），30），21）， 设置小时（设置分钟（新日期（），0），22）， 设置小时（设置分钟（新日期（），30），22）， 设置小时（设置分钟（新日期（），0），23）， 设置小时（设置分钟（新日期（），30），23）， 设置小时（设置分钟（新日期（），0），24）， 设置小时（设置分钟（新日期（），30），24）， 设置小时数（设置分钟数（新日期（），0），1）， 设置小时（设置分钟（新日期（），30），1）， 设置小时数（设置分钟数（新日期（），0），2）， 设置小时数（设置分钟数（新日期（），30），2）， 设置小时数（设置分钟数（新日期（），0），3）， 设定小时数（设定分钟数（新日期（），30），3）， 设置小时数（设置分钟数（新日期（），0），4）， 设置小时数（设置分钟数（新日期（），30），4）， 设置小时数（设置分钟数（新日期（），0），5）， 设定小时数（设定分钟数（新日期（），30），5）， 设置小时数（设置分钟数（新日期（），0），6）， 设置小时数（设置分钟数（新日期（），30），6）， 设置小时数（设置分钟数（新日期（），0），7）， 设定小时数（设定分钟数（新日期（），30），7）， 设置小时（设置分钟（新日期（），0），8）， 设置小时（设置分钟（新日期（），30），8）， ]} /> ); } 这是代码沙盒代码：

---

您可以使用

minTime

和

maxTime

道具禁用从下午5点到早上7点的计时

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  const onDateChange = (date) => {
    console.log('Save date here', date);
    setStartDate(date);
  };

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={onDateChange}
        showTimeSelect
        minDate={new Date()}
        minTime={new Date(0, 0, 0, 7, 30)} // 7:30am
        maxTime={new Date(0, 0, 0, 16, 30)} // 4:30pm
        dateFormat="dd/MM/yyyy hh:mm a"
        timeFormat="hh:mm a"
        timeIntervals={30}
      />
    </div>
  );
}

更新： 要限制当前日期的minTime，您需要动态计算

minTime

import "./styles.css";
import React, { useState, useMemo } from "react";
import DatePicker from "react-datepicker";

// import required css from library
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  // useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
  const minTime = useMemo(() => {
    const todayDate = new Date();
    const selectedDate = new Date(startDate); // create a copy before modifying
    // When current date is selected, set minTime to current time
    if(selectedDate.setHours(0,0,0,0) === todayDate.setHours(0,0,0,0)) {
      return new Date();
    }

    // For other dates return default 7:00am
    return new Date(0, 0, 0, 7);
  }, [startDate]);

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
        showTimeSelect
        minDate={new Date()}
        minTime={minTime}
        maxTime={new Date(0, 0, 0, 17)} // 5:00pm
        dateFormat="dd/MM/yyyy hh:mm a"
        timeFormat="hh:mm a"
        timeIntervals={30}
      />
    </div>
  );
}

导入“/styles.css”； 从“React”导入React，{useState，usemo}； 从“反应日期选择器”导入日期选择器； //从库中导入所需的css 导入“react datepicker/dist/react datepicker.css”； 导出默认函数App（）{ const[startDate，setStartDate]=useState（新日期（））； //useMemo仅在其中一个依赖项发生更改时才重新计算记忆值。此优化有助于避免在每次渲染时进行昂贵的计算。 const minTime=useMemo（（）=>{ const todayDate=新日期（）； const selectedDate=new Date（startDate）；//修改前创建一份副本 //选择当前日期后，将minTime设置为当前时间 if（selectedDate.setHours（0,0,0,0）==todayDate.setHours（0,0,0））{ 返回新日期（）； } //对于其他日期，返回默认值7:00am 返回新日期（0,0,0,7）； }，[起始日期]； 返回( 设置开始日期（日期）} showTimeSelect minDate={new Date（）} minTime={minTime} maxTime={新日期（0,0,0,17）}//5:00pm dateFormat=“dd/MM/yyyy hh:MM a” timeFormat=“hh:mm a” 时间间隔={30} /> ); }

---

使用

onChange

值是什么意思？另外，您要排除的时间是什么？比如保存所选日期的值。另外，我试图排除从下午5点到晚上7点之间的时间。选定的日期已保存在状态变量

startDate

@Sohaib哦，对了，只需要startDate.toDateString（）就可以了。但我对ExcludeTimes有这个问题，这是因为minTime大于maxTime。您需要检查当前日期是否为今天，时间是否超过下午5点，然后将默认日期改为明天。谢谢，它确实有效，但是，我如何根据我当前的日期限制最短时间呢。因为目前我在这里的时间是下午1:14，但我仍然可以选择以前的时间。我也更新了这里的代码-请参阅更新部分抱歉再次询问，但我注意到时间不起作用。选择时间不会改变，它始终保持在上午12点-codesandbox.io/s/festival-wescoff-71z8u？file=/src/App.js–更新了答案。很抱歉，此处出现问题

startDate.setHours（0,0,0,0）

。因此，原始日期被修改。

import "./styles.css";
import React, { useState, useMemo } from "react";
import DatePicker from "react-datepicker";

// import required css from library
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  // useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
  const minTime = useMemo(() => {
    const todayDate = new Date();
    const selectedDate = new Date(startDate); // create a copy before modifying
    // When current date is selected, set minTime to current time
    if(selectedDate.setHours(0,0,0,0) === todayDate.setHours(0,0,0,0)) {
      return new Date();
    }

    // For other dates return default 7:00am
    return new Date(0, 0, 0, 7);
  }, [startDate]);

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
        showTimeSelect
        minDate={new Date()}
        minTime={minTime}
        maxTime={new Date(0, 0, 0, 17)} // 5:00pm
        dateFormat="dd/MM/yyyy hh:mm a"
        timeFormat="hh:mm a"
        timeIntervals={30}
      />
    </div>
  );
}