更新于2024/03/14
antd更新的也太快了 我本地5.12.8是不支持 官方文档上5.14的info属性的
过了几天 在平台上打包 发现我之前的写法和判断失效了 也就是我本地和线上打包之后的线上版本逻辑和交互并不一致 我将本地的依赖删除干净 重新下载了一遍依赖 发现我这个5.12.8的版本的rangepicker 居然有了官网5.14的info属性， 我这不知道是喜是忧， 改下吧 还好不复杂
image.png
之前初稿 （老版本）
const onOpenChange = (open) => {
// 打开选择框时重置日期 这点很重要 否则会影响正常选取逻辑
if (open) {
setDates([null, null]);
form.setFieldValue('time', [null, null])
}
}
// 这个就更重要了 虽然没有看源码 但是最后的return应该是一个筛选的功能 而不是单纯的输出布尔值 这里是限制选择7天
const disabledDate = (current) => {
if (!dates) {
return false;
}
const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
return !!tooEarly || !!tooLate;
}
// 这里是提前封装好的form表单 用法与标签使用完全相同
const formFields: FormFieldProps[] = [
{
component: 'RangePicker',
formItemProps: {
name: 'time',
label: '时间区间',
},
componentProps: {
format: 'YYYY-MM-DD',
onOpenChange: onOpenChange,
disabledDate: disabledDate,
onCalendarChange:(val) => {
// 这个事件可以拿到在刚选择完一个日期后的回调 而onchange只在起止结束都选择完后才能触发
setDates(val)
},
},
},
];
参考https://blog.csdn.net/niconicon____/article/details/130503584
