javascript - 如何在功能组件中使用react-datepicker的excludeTimes并使用onChange？

Question

它说的错误是:

ReferenceError setHours is not defined

这些是代码。另外，如何使用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>
  );
}

这是codesandbox代码: https://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js

Answer 1

您可以使用 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>
  );
}

如果您还需要启用上午 7 点和下午 5 点，请使用以下命令:

minTime={new Date(0, 0, 0, 7)} // 7:00am
maxTime={new Date(0, 0, 0, 17)} // 5:00pm

更新: 要限制当前日期的 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>
  );
}