원인 분석
실제로 유형이 일치하지 않고 이러한 유형을 임의로 다시 작성할 수 있기 때문에 주로 ts 문법 메커니즘에 문제가 있는 경우가 많습니다.
공식 홈페이지에 따르면 어떨 때는 오류 없이 사용할 수 있는데, 어떨 때는 어떨 때는 잘 안되는 이유는 무엇일까요? 프로젝트에서 사용하는 버전이 다르기 때문입니다.
해결 방법? 아래를 봐주세요:
1. antd 공식 웹사이트 소스 코드
코드는 다음과 같습니다(예제).
const {
RangePicker } = DatePicker
const dateFormat = 'YYYY-MM-DD'
type RangeValue = [Dayjs | null, Dayjs | null] | null
const [dates, setDates] = useState<RangeValue>(null)
const [value, setValue] = useState<RangeValue>(null)
//设置可选范围最大为15天
const disabledDate = (current: Dayjs) => {
if (!dates) {
return false
}
const tooLate = dates[0] && current.diff(dates[0], 'days') > 15
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 15
return !!tooEarly || !!tooLate
}
//每次选择清空上一次记录
const onOpenChange = (open: boolean) => {
if (open) {
setDates([null, null])
} else {
setDates(null)
}
}
//获取日期范围字符串
const onCalendarChange = (val: any) => {
setDates(val)
try {
let start = moment(val[0].valueOf()).format('YYYY-MM-DD')
console.log(start)
setstartdate(start)
if (val[1] !== null || val[1] !== undefined) {
let end = moment(val[1].valueOf()).format('YYYY-MM-DD')
console.log(end)
setenddate(end)
}
} catch (e) {
message.error('请按顺序输入起始日期！')
}
}
//日期选择组件
const operations = (
<div>
<RangePicker
locale={
locale}
allowClear={
false}
defaultValue={
[
dayjs('2022-09-03', dateFormat),
dayjs('2022-09-18', dateFormat),
]}
value={
dates || value}
disabledDate={
disabledDate}
onCalendarChange={
onCalendarChange}
onChange={
(val) => setValue(val)}
onOpenChange={
onOpenChange}
/>
</div>
)
2. 수정된 코드
가장 중요한 것은 정의할 때 type을 any로 변경하는 것이고, 메소드에서 매개변수 current: Dayjs type도 current: any로 변경됩니다.
시작 시간과 종료 시간에 대해 상태를 정의하고 입력하면 모든 오류가 해결됩니다.
const {
RangePicker } = DatePicker;
const [dates, setDates] = useState<any>(null);
const [value, setValue] = useState<any>(null);
const [startdate, setstartdate] = useState<any>();
const [enddate, setenddate] = useState<any>();
//设置可选范围最大为15天
const disabledDate = (current:any ) => {
if (!dates) {
return false;
}
const tooLate = dates[0] && current.diff(dates[0], 'days') > 15;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 15;
return !!tooEarly || !!tooLate;
};
//每次选择清空上一次记录
const onOpenChange = (open: boolean) => {
if (open) {
setDates([null, null]);
} else {
setDates(null);
}
};
//获取日期范围字符串
const onCalendarChange = (val: any) => {
setDates(val);
try {
let start = moment(val[0].valueOf()).format('YYYY-MM-DD');
console.log(start);
setstartdate(start);
if (val[1] !== null || val[1] !== undefined) {
let end = moment(val[1].valueOf()).format('YYYY-MM-DD');
console.log(end);
setenddate(end);
}
} catch (e) {
message.error('请按顺序输入起始日期！');
}
};
//日期选择组件
const operations = (
<div>
<RangePicker
locale={
locale}
allowClear={
false}
//defaultValue={[dayjs('2022-09-03', dateFormat), dayjs('2022-09-18', dateFormat)]}
defaultValue={
[startdate, enddate]}
value={
dates || value}
disabledDate={
disabledDate}
onCalendarChange={
onCalendarChange}
onChange={
onChange}
onOpenChange={
onOpenChange}
/>
</div>
);