原因分析
其实很多时候是ts语法机制问题，主要是类型匹配上不，将这些类型改写成any即可。
为什么有的时候可以按照官网用不出错，有时又会出错呢？因为项目中使用的版本不一。
如何解决？请看下面：
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.修改后代码
主要是在定义时将类型都改为any，方法中参数current: Dayjs类型也改为current: any。
对于开始时间与结束时间，我们自己定义state放入，这样就解决了所有错误。
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>
);