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;
}