antd RangePicker设置mode=['month', 'month']后,无法设置不可选项的处理

antd RangePicker设置mode=['month', 'month']后,disabledDate不能控制前后禁用的时间。
config.ts代码如下:

{
  field: 'dateTime',
  label: '时间',
  component: 'RangePicker',
  componentProps: ({ formActionType }) => {
    return {
      valueFormat: 'YYYY-MM',
      format: 'YYYY-MM',
      mode: ['month', 'month'],
      placeholder: ['开始月份', '结束月份'],
      onPanelChange: async (_e: any) => {
        const { setFieldsValue } = formActionType;
        await setFieldsValue({
          dateTime: _e,
        });
      },
    };
  },
}

大概可能是因为设置mode=['month', 'month']后,组件内部已经有disable,所以设置disabledDate无效。

项目中使用两个monthPicker来解决,代码如下:

<a-month-picker
  placeholder="开始月份"
  v-model:value="startMonth"
  default-value=""
  :disabled-date="startDisabledDate"
/>
-
<a-month-picker
  placeholder="结束月份"
  v-model:value="endMonth"
  :disabled-date="endDisabledDate"
/>

import moment, { Moment } from 'moment';

/**
 * 时间限制范围 开始时间~结束时间不能超过3个月
 */
const startDisabledDate = (time) => {
  const endValue = moment(endMonth.value)
  if (!time || !endValue) {
    return false;
  }

  return (
    moment(endMonth.value).diff(moment(time), 'months') >= 3 ||
    moment(endMonth.value).diff(moment(time), 'months') <= -1
  );
};

const endDisabledDate = (time) => {
  const startValue = moment(startMonth.value)
  if (!time || !startValue) {
    return false;
  }
  return (
    moment(time).diff(moment(startMonth.value), 'months') > 3 ||
    moment(moment(time)).diff(startMonth.value, 'months') < 0
  )
};

效果如下:

posted @ 2024-04-29 16:43  显示昵称已被使用#  阅读(73)  评论(0编辑  收藏  举报