如何解决为什么使用react-dates和typescript无法单击日历中的日期?
我无法使用react-dates和Typescript在日历上选择日期。
始终startDate和endDate为null。不知道我要去哪里错了。
我要做什么? 我想显示显示从当前日期起3个月的日历,以及当用户在日历中选择一个日期作为开始日期时的日历。
,并且由于结束日期不能在开始日期之前,所以我们禁用开始日期之前的天数。从所选开始日期开始超过6周的日期也将被禁用。
我正在努力实现以上目标。
下面是我的代码,
function ItemCreationForm() {
const LIMIT_RANGE_DAYS = 180;
const useRangeDates = () => {
const [startDate,setStartDate] = React.useState(null);
const [endDate,setEndDate] = React.useState(null);
const [focusedInput,setFocusedInput] = React.useState('startDate');
const isOutsideRange = (date: any | null) =>
!date.isBetween(moment().subtract(LIMIT_RANGE_DAYS,'d'),moment(),'d');
const converToMomentIfNeeded = (date: any | null) =>
typeof date === 'string' ? moment(date,'L',true) : date;
const updateStartDate = (start: any) => {
const newStartDate = converToMomentIfNeeded(start);
if (!newStartDate) {
return;
}
const validStartDateFormat =
newStartDate.isValid() && !isOutsideRange(newStartDate);
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() && !isOutsideRange(newEndDate);
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,// startDateString: (startDate && startDate.format('L')) || '',// endDateString: (endDate && endDate.format('L')) || '',onFocusChange: (focused: any) => {
setFocusedInput(!focused ? 'startDate' : focused);
},};
};
const {
focusedInput,onFocusChange,} = useRangeDates();
return (
<DaterangePicker
onDatesChange={onDatesChange}
focusedInput={focusedInput}
onFocusChange={onFocusChange}
startDate={startDate}
endDate={endDate}
/>
);
}
type Props = Omit<
DayPickerRangeControllerShape,'numberOfMonths' | 'hideKeyboardShortcutsPanel' | 'noBorder'
>;
function DaterangePicker({props}: Props) {
return (
<DayPickerRangeController
{...props}
numberOfMonths={3}
hideKeyboardShortcutsPanel
noBorder
horizontalMonthPadding={32}
transitionDuration={0}
navNext={
<Clickable $left={true}>
<Icon name="triangle-right" size={12} color={theme.colors.white} />
</Clickable>
}
navPrev={
<Clickable $left={false}>
<Icon name="triangle-left" size={12} color={theme.colors.white} />
</Clickable>
}
/>
);
}
我不确定为什么即使用户单击日历上的某些日期并且所有日期都是禁用颜色,startDate和endDate为何始终为null。
有人可以帮我这个忙吗?谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。