import { Icon } from '@ali/deep'; import React, { FC, useState } from 'react'; import styles from './style.module.css'; interface IDayParams { minAdvanceTime: number; maxAdvanceTime: number; bookDate: number; } const DateSelector: FC<IDayParams> = ({ bookDate, minAdvanceTime, maxAdvanceTime }) => { console.log('maxAdvanceTime',maxAdvanceTime) const [date, setDate] = useState(new Date(bookDate)); const handlePrevClick = () => { const newDate = new Date(date.getTime() - 15 * 24 * 60 * 60 * 1000); const today = new Date(); if (newDate < today) { setDate(today); } else { setDate(newDate); } }; const handleNextClick = () => { const newDate = new Date(date.getTime() + 15 * 24 * 60 * 60 * 1000); setDate(newDate); }; const formatDate = (date) => { const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); return `${month}/${day}日`; }; const renderDateRange = () => { const start = new Date(date.getTime() - 0 * 24 * 60 * 60 * 1000); const end = new Date(date.getTime() + 14 * 24 * 60 * 60 * 1000); const firstDay = new Date(start); const lastDay = new Date(end); return ( <div className={styles.dates}> <div key={firstDay.getTime()} className={styles.date}> {formatDate(firstDay)} </div> <span>-</span> <div key={lastDay.getTime()} className={styles.date}> {formatDate(lastDay)} </div> </div> ); }; return ( <div className={styles.choose}> <div className={styles.content}> <Icon type="arrow-double-left" onClick={handlePrevClick} className={styles.icon} /> <div>{renderDateRange()}</div> <Icon type="arrow-double-right" onClick={handleNextClick} className={styles.icon} /> </div> </div> ); }; export default DateSelector;不如最大时间是15天,就不能往下点了,应该值写
时间: 2023-12-30 20:02:33 浏览: 63
可以在 `handleNextClick` 函数中加入判断逻辑,如果 `newDate` 超过了 `maxAdvanceTime`,则不更新日期。例如:
```
const handleNextClick = () => {
const newDate = new Date(date.getTime() + 15 * 24 * 60 * 60 * 1000);
if (newDate > new Date(maxAdvanceTime)) {
return;
}
setDate(newDate);
};
```
这样就可以实现最大时间为15天的限制了。
阅读全文