首頁猿問根據一天顯示不同的時間

根據一天顯示不同的時間

JavaScript

慕哥6287543 2023-04-01 15:50:46

我試圖根據日期排除不同的時間，但無論我選擇什么日期，時間都被禁用。例如，如果我選擇 9 月 28 日，則應禁用 12 點鐘。如果我選擇 10 月 3 日，那么下午 1 點應該被禁用，但是 12 和 1 從一開始就被禁用，并且無論我選擇什么日期都保持這種狀態。https://hacker0x01.github.io/react-datepicker const isSunday = (date) => { const day = getDay(date); return day !== 0; }; let excluded = [ { time: "12", date: "28/09/2020", }, { time: "13", date: "03/10/2020", }, ]; <DatePickerField filterDate={isSunday} minTime={new Date(new Date().setHours(8, 0, 0))} maxTime={new Date(new Date().setHours(17, 0, 0))} excludeTimes={excluded.map((exclude, index) => { return setHours( setMinutes(new Date(), 0), parseInt(exclude.time) ); })} timeIntervals={60} maxDate={addDays(new Date(), 3)} dateFormat="d/M/Y HH:mm" timeFormat="HH:mm" name="time-to-contact" label="Required Date *" />

查看完整描述

1 回答

滄海一幻覺

TA貢獻1824條經驗獲得超5個贊

問題是你總是返回excluded道具excludeTimes。只有選擇的日期是日期才需要返回時間。類似的東西應該工作。（const [value, setValue] = useState();也通過添加）。

<DatePickerField

filterDate={isSunday}

minTime={new Date(new Date().setHours(8, 0, 0))}

maxTime={new Date(new Date().setHours(17, 0, 0))}

excludeTimes={excluded.map((exclude) => {

const excDate = new Date(exclude.date);

if (

value &&

excDate.getDate() === value.getDate() &&

excDate.getFullYear() === value.getFullYear() &&

excDate.getMonth() === value.getMonth()

) {

return new Date(new Date().setHours(exclude.time, 0, 0));

}

return null;

})}

timeIntervals={60}

maxDate={addDays(new Date(), 3)}

dateFormat="d/M/Y HH:mm"

timeFormat="HH:mm"

name="time-to-contact"

label="Required Date *"

onChange={(e) => {

setValue(new Date(e));

}}

selected={value}

此外，您的日期格式不適合 JS，應該是：

const excluded = [

{

time: "12",

date: "09/28/2020"

{

time: "13",

date: "10/03/2020"

}

];

這是一個工作示例的鏈接： https: //codesandbox.io/s/competent-smoke-4nv1e ?file=/src/App.js

要為特定日期（比如星期一）添加排除時間，您可以使用以下命令：

const excluded = [

{

time: "12",

day: 1

]

并將道具設置為：

excludeTimes={excluded.map((exclude) => {

if (value && value.getDay() === exclude.day) {

return new Date(new Date().setHours(exclude.time, 0, 0));

}

return null;

})}

反對回復 2023-04-01

1 回答
0 關注
145 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

根據一天顯示不同的時間

根據一天顯示不同的時間

1 回答

添加回答