Ant Design Vue 中 DatePicker动态限制Time框

需求：限制结束时间在开始时间之后，包括时分；

设计思路：判断各个不同的时间来return出需要的限制条件；

我资历尚浅，有啥不对的地方请大家多多指教。

 

{
  field: 'startTime',
  component: 'DatePicker',
  label: '开启时间',
  colProps: {
    span: 24,
  },
  componentProps: () => {
    return {
      style: {
        width: '100%',
      },
      format: 'YYYY-MM-DD HH:mm',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      showTime: { format: 'HH: mm' },
    };
  },
  required: true,
},
{
  field: 'endTime',
  component: 'DatePicker',
  label: '关闭时间',
  required: true,
  colProps: {
    span: 24,
  },
  componentProps: ({ formModel }) => {
    return {
      showCount: true,
      showTime: { format: 'HH: mm' },
      disabled: !formModel['startTime'],
      format: 'YYYY-MM-DD HH:mm',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      disabledDate: (current) => {
        return current && current < moment(formModel['startTime']).subtract(0, 'days'); //当天之后的不可选，不包括当天
      },
      disabledTime: () => {
        //如果开始时间小于结束时间的天时（不为同一天）
        if (
          Number(formModel['startTime'].split(' ')[0].split('-')[2]) <
          Number(formModel['endTime'].split(' ')[0].split('-')[2])
        ) {
          return {
            disabledHours: () => [],
            disabledMinutes: () => [],
          };
          //如果开始时间的天等于结束时间的天时（为同一天）
        } else {
          //如果开始时间的时等于结束时间的时（选择同一天同一时）
          if (
            formModel['startTime'].split(' ')[1].split(':')[0] ===
            formModel['endTime'].split(' ')[1].split(':')[0]
          ) {
            return {
              disabledHours: () =>
                range(0, 24).splice(0, formModel['startTime'].split(' ')[1].split(':')[0]),
              disabledMinutes: () =>
                range(0, 60).splice(
                  0,
                  formModel['startTime'].split(' ')[1].split(':')[1] * 1 + 1,
                ),
            };
          } else {
            //（同一天不同时）
            return {
              disabledHours: () =>
                range(0, 24).splice(0, formModel['startTime'].split(' ')[1].split(':')[0]),
              disabledMinutes: () => [],
            };
          }
        }
      },
      style: {
        width: '100%',
      },
    };
  },
},