javascript - 如何在功能组件中使用 react-datepicker 的 excludeTimes 并使用 onChange?
问题描述
它说的错误是:
ReferenceError setHours 未定义
这些是代码。另外,如何使用 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>
);
}
这是代码框代码: https ://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js
解决方案
您可以使用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>
);
}
推荐阅读
- php - 使用 tcpdf、php 7 和 drupal 7 显示图像时出现 tempnam() 错误
- architecture - 微服务——以不同速度扩展的一个域和多个功能
- ios - 将数字输入 UIText 字段后如何启用 IBAction
- regex - 如何在 Intellij 中将带有控制字符的文本转换为格式正确的文本
- javabeans - 在运行时在 UIComponent 中添加 DeclarativeComponent。Oracle JDeveloper 12c
- python - 什么原因导致 ODBC 连接错误 08001 ssl 安全错误
- python - 如何从init运行异步协程,等到它完成
- python - 如何从外部 python 脚本正确运行爬虫并获取其项目输出
- python - 带有类输入的 Python 类
- reactjs - 开玩笑:如何创建一个镜像 src 目录的 __tests__ 文件夹?