如何解决如何使用react-dates库和打字稿禁用开始日期之前的日期选择?
我想禁用从开始日期到开始日期之后的6周,直到用户选择结束日期为止的日期选择。用户选择结束日期后,便可以选择所有日期。
我想使用react-dates DayPickerRangeController做到这一点。
下面是我的代码,它禁止从开始日期起6周后选择日期。但这只会在用户选择结束日期之后发生。
const useRangeDates = () => {
const [startDate,setStartDate] = React.useState(null);
const [endDate,setEndDate] = React.useState(null);
const [focusedInput,setFocusedInput] = React.useState('startDate');
const isOutSideRange = (day: any) => {
//start day < 6 weeks < end date
if (!startDate || !endDate) return false;
else {
return startDate.diff(day,'week') <= -6;
}
};
const converToMomentIfNeeded = (date: any) =>
typeof date === 'string' ? moment(date,'L',true) : date;
const updateStartDate = (start: any) => {
const newStartDate = converToMomentIfNeeded(start);
if (!newStartDate) {
return;
}
const validStartDateFormat = newStartDate.isValid();
const isAfterCurrentEnd = endDate && newStartDate.isAfter(endDate,'d');
if (validStartDateFormat) {
if (isAfterCurrentEnd) {
setEndDate(null);
}
setFocusedInput('endDate');
setStartDate(newStartDate);
}
};
const updateStartEnd = (end: any) => {
const newEndDate = converToMomentIfNeeded(end);
if (!newEndDate) {
return;
} else if (end === null && endDate) {
setEndDate(null);
return;
}
const validEndDateFormat = newEndDate.isValid();
const isBeforeCurrentStart =
startDate && newEndDate.isBefore(startDate,'d');
if (validEndDateFormat && !isBeforeCurrentStart) {
setEndDate(newEndDate);
}
};
const onDatesChange = (newDates: any) => {
updateStartDate(newDates.startDate);
updateStartEnd(newDates.endDate);
};
return {
focusedInput,onDatesChange,isOutSideRange,startDate,endDate,onFocusChange: focused => {
setFocusedInput(!focused ? 'startDate' : focused);
},};
};
function Parent() {
const {
focusedInput,onFocusChange,} = useRangeDates();
return (
<Daterange
onDatesChange={onDatesChange}
startDate={startDate}
endDate={endDate}
focusedInput={focusedInput}
onFocusChange={onFocusChange}
isOutSideRange={isOutSideRange}
/>
);
}
function Daterange(props: Props) {
return (
<DayPickerRangeController
{...props}
numberOfMonths={3}
focusedInput={focusedInput}
onFocusChange={onFocusChange}
isOutsideRange={isOutSideRange}
/>
);
}
我不确定如何禁用开始日期之前和开始日期之后6周之后的日期选择。 一旦选择了终止日期,则应该可以选择所有日期。
有人可以帮我这个忙吗?谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。