ant组件DatePicker 日期选择框动态设置日期可选择范围不超过31天

 

        <a-range-picker
            v-model:value="searchData.date"
            :format="'YYYY-MM-DD'"
            :placeholder="['开始日期', '结束日期']"
            :allow-clear="false"
            :disabled-date="disabledDate"
            @calendarChange="calendarChange"
            @blur="blurDate"
          />
        

      const startDate = ref<any>();
      const calendarChange = (dates) => {
        startDate.value = dates;
      };
      const disabledDate = (current: Moment) => {
        if (startDate.value && startDate.value[0]) {
          return (
            current < moment(startDate.value[0]).subtract(31, "days") ||
            current > moment(startDate.value[0]).add(31, "days")
          );
        } else {
          return false;
        }
      };
      const blurDate = () => {
        startDate.value = undefined;
      };        

　　首先calendarChange 函数获取到时间选择框的点击时间的变化并回调数据存入startDate中，然后disabledDate 函数根据moment(startDate.value[0])获取到选择的开始时间，并根据该时间向前后各扩大31天，超出31天的时间禁用。最后使用blurDate函数在失去焦点的时候重置startDate数据，使下次再选择时间的时候对开始时间不限制选择范围