el-select，日期范围选择器，只能选择一定时间范围内的日期

el-select，日期范围选择器，只能选择一定时间范围内的日期

需求描述

时间跨度只能选择一年内的数据，不可选择大于1年的的数据，时间跨度大于1年的数据 不可选择；
比如说选择了日期起2025-07-22，小于1年前今天的日期（2024-07-22）不可选择，大于1年后今天的日期（2026-07-22）不可选择；

分析设计

可以使用pickerOptions.disabledDate属性，表单表格组件，可以封装成方法传入对应的表单、表格该行的数据

这样业务内就是使用表单表格数据了

现在具体分析一下，只能选择1年内的数据的所有场景

1、如果已选开始日期，结束日期只能选开始日期1年以内的数据

如果已选开始日期，结束日期只能选 大于1年前今天的数据并且小于1年后今天的数据，不可选择的日期禁用

const { billDateStart, billDateEnd } = row;const curTime = moment(time).format(\'YYYY-MM-DD\')//* 如果已选开始日期，结束日期只能选开始日期1年以内的日期if (billDateStart && !billDateEnd) { const oneYearAgo = moment(billDateStart).subtract(1, \'year\').format(\'YYYY-MM-DD\') const oneYearLater = moment(billDateStart).add(1, \'year\').format(\'YYYY-MM-DD\') const allowSelect = curTime <= oneYearLater && curTime >= oneYearAgo return !allowSelect;}

2、如果已选结束日期，开始日期只能选结束日期1年以内的数据 —— 用户选择日期的时候不存在这个场景，但是可能存在用户手动清掉日期起，手动填写日期的场景

如果已选结束日期，开始日期只能选 大于1年前今天的数据并且小于1年后今天的数据，不可选择的日期禁用

//* 如果已选结束日期，开始日期只能选结束日期1年内的日期if (billDateEnd && !billDateStart) { const oneYearAgo = moment(billDateEnd).subtract(1, \'year\').format(\'YYYY-MM-DD\') const oneYearLater = moment(billDateEnd).add(1, \'year\').format(\'YYYY-MM-DD\') const allowSelect = curTime <= oneYearLater && curTime >= oneYearAgo return !allowSelect;}

3、两个日期都选了的场景（选择完毕，用户可能直接修改日期）

两个日期都选了的场景，小于日期止1年的数据可以选择，大于日期起1年内的数据可以选择，其他日期禁用

//* 如果两个都选了if (billDateEnd && billDateStart) { const oneYearAgo = moment(billDateEnd).subtract(1, \'year\').format(\'YYYY-MM-DD\') const oneYearLater = moment(billDateStart).add(1, \'year\').format(\'YYYY-MM-DD\') const allowSelect = curTime <= oneYearLater && curTime >= oneYearAgo return !allowSelect;}

4、两个日期都没选的场景（初始状态）,默认全部可以选择

全部代码

//? 查询页面 搜索表单 配置const formOptions = (vm) => { const columns: any[] = [ { key: \'billDate\', name: \'单据日期\', inputType: \'daterange\', required: true, pickerOptions: (row) => { return { disabledDate: (time) => { //* 只能选择1年内的数据 const { billDateStart, billDateEnd } = row; const curTime = moment(time).format(\'YYYY-MM-DD\') //* 如果已选开始日期，结束日期只能选开始日期1年以内的日期 if (billDateStart && !billDateEnd) {  const oneYearAgo = moment(billDateStart).subtract(1, \'year\').format(\'YYYY-MM-DD\')  const oneYearLater = moment(billDateStart).add(1, \'year\').format(\'YYYY-MM-DD\')  const allowSelect = curTime <= oneYearLater && curTime >= oneYearAgo  return !allowSelect; } //* 如果已选结束日期，开始日期只能选结束日期1年内的日期 if (billDateEnd && !billDateStart) {  const oneYearAgo = moment(billDateEnd).subtract(1, \'year\').format(\'YYYY-MM-DD\')  const oneYearLater = moment(billDateEnd).add(1, \'year\').format(\'YYYY-MM-DD\')  const allowSelect = curTime <= oneYearLater && curTime >= oneYearAgo  return !allowSelect; } //* 如果两个都选了 if (billDateEnd && billDateStart) {  const oneYearAgo = moment(billDateEnd).subtract(1, \'year\').format(\'YYYY-MM-DD\')  const oneYearLater = moment(billDateStart).add(1, \'year\').format(\'YYYY-MM-DD\')  const allowSelect = curTime <= oneYearLater && curTime >= oneYearAgo  return !allowSelect; } //* 如果两个都没选（初始状态），默认全部可以点击 return false; }, // 监听日期选择 onPick: ({ maxDate, minDate }) => { row.billDateStart = minDate ? moment(minDate).format(\'YYYY-MM-DD\') : \'\'; row.billDateEnd = maxDate ? moment(maxDate).format(\'YYYY-MM-DD\') : \'\'; } } }, default: { billDateStart: moment().subtract(1, \'year\').format(\'YYYY-MM-DD\'), billDateEnd: moment().format(\'YYYY-MM-DD\'), billDate: [moment().subtract(1, \'year\').format(\'YYYY-MM-DD\'), moment().format(\'YYYY-MM-DD\')], }, }, { key: \'billType\', descKey: \'billTypeMeaning\', name: \'业务类别\', i18nKey: \'ladingBusinessType\', inputType: \'select\', dictGroup: \'FIN_GROUP\', dictCode: \'IN_INVOICE_BILL_TYPE\', }, { key: \'fuzzyBillNum\', name: \'业务单号\', i18nKey: \'billNo\', inputType: \'input\', }, { key: \'settlePartnerId\', descKey: \'settlePartnerMeaning\', name: \'结算单位\', inputType: \'remote\', remoteParams: { status: \'YES\', }, remoteClass: remoteQueries.partner, valueKey: \'id\', labelKey: \'partnerMeaning\', searchKey: \'partnerMeaning\', queryValue: \'id\', queryLabel: \'partnerMeaning\', }, ] processRequiredField(columns, vm); columns.forEach(column => { Object.assign(column, { i18nKey: column.i18nKey || column.descKey || column.key, showInTable: column.showInTable ?? true, showInEdit: column.showInEdit ?? false, showInDetail: column.showInDetail ?? true, showInQuery: column.showInQuery ?? true, }) }); return columns;}