更新于2024/03/14
antd更新的也太快了 我本地5.12.8是不支持 官方文檔上5.14的info屬性的
過了幾天 在平臺上打包 發(fā)現(xiàn)我之前的寫法和判斷失效了 也就是我本地和線上打包之后的線上版本邏輯和交互并不一致 我將本地的依賴刪除干凈 重新下載了一遍依賴 發(fā)現(xiàn)我這個(gè)5.12.8的版本的rangepicker 居然有了官網(wǎng)5.14的info屬性， 我這不知道是喜是憂嚼蚀， 改下吧 還好不復(fù)雜
image.png
之前初稿 （老版本）
const onOpenChange = (open) => {
// 打開選擇框時(shí)重置日期 這點(diǎn)很重要 否則會影響正常選取邏輯
if (open) {
setDates([null, null]);
form.setFieldValue('time', [null, null])
}
}
// 這個(gè)就更重要了 雖然沒有看源碼 但是最后的return應(yīng)該是一個(gè)篩選的功能 而不是單純的輸出布爾值 這里是限制選擇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表單 用法與標(biāo)簽使用完全相同
const formFields: FormFieldProps[] = [
{
component: 'RangePicker',
formItemProps: {
name: 'time',
label: '時(shí)間區(qū)間',
},
componentProps: {
format: 'YYYY-MM-DD',
onOpenChange: onOpenChange,
disabledDate: disabledDate,
onCalendarChange:(val) => {
// 這個(gè)事件可以拿到在剛選擇完一個(gè)日期后的回調(diào) 而onchange只在起止結(jié)束都選擇完后才能觸發(fā)
setDates(val)
},
},
},
];
參考https://blog.csdn.net/niconicon____/article/details/130503584
