vue3中el-date-picker控件的动态范围限制

1.功能实现

描述：需要限制查询的数据不能跨月，所以当范围控件选择一个日期后，动态锁定选择的范围

数据声明

const refData = reactive({
  choiceDate: "",  // 选择的日期值
  startTime: "",   // 月的第一天
  endTime: ""      // 月的最后提一天
});

1.1 选择值

• calendar-change

控件默认提供该事件，来监控数据的选择。实现的代码如下：

// 触发选择
const valueSelChange = vals => {
  if (vals && vals.length > 0) {
    refData.choiceDate = vals[0];
    refData.startTime = getMonthFirstDate(vals[0]);
    refData.endTime = getMonthLastDate(vals[0]);
  } else {
    refData.choiceDate = "";
    refData.startTime = "";
    refData.endTime = "";
  }
};

如果选择了一个值，则vals参数中，就会存在vals[0]的数据，根据该数据可以计算数据的月份第一天和最后一天。

1.2 禁用日期计算

const setDisabledDate = (time: Date) => {
  if (!refData.choiceDate && !refData.startTime) {
    return false;
  } else {
    return !(
      dayjs(time) >= dayjs(new Date(refData.startTime)) &&
      dayjs(time) <= dayjs(new Date(refData.endTime))
    );
  }
};

1.3 控件配置

<el-date-picker
  v-model="refData.searchForm.dateValue"
  type="datetimerange"
  range-separator="To"
  @calendar-change="valueSelChange"
  :disabled-date="setDisabledDate"
  @change="dateTimeChange"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
/>

change事件复原限制范围

//日期变换
const dateTimeChange = () => {
  refData.searchForm.startTime = dayjs(
    new Date(refData.searchForm.dateValue[0])
  ).format("YYYY-MM-DD HH:mm:ss");
  refData.searchForm.endTime = dayjs(
    new Date(refData.searchForm.dateValue[1])
  ).format("YYYY-MM-DD HH:mm:ss");

  refData.choiceDate = "";
  refData.startTime = "";
  refData.endTime = "";
};

2. 计算日期工具类

// 获取某月的第一天
function getMonthFirstDate(date: Date) {
  if (!date) {
    return null;
  }
  date.setDate(1);
  let month = parseInt(date.getMonth() + 1);
  let day = date.getDate();
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  return date.getFullYear() + "-" + month + "-" + day + " 00:00:00";
}

// 获取某月的第一天
function getMonthLastDate(date: Date) {
  if (!date) {
    return null;
  }
  let currentMonth = date.getMonth();
  const nextMonth = ++currentMonth;
  const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
  const oneDay = 1000 * 60 * 60 * 24;
  const lastTime = new Date(nextMonthFirstDay - oneDay);
  let month = parseInt(lastTime.getMonth() + 1);
  let day = lastTime.getDate();
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  return date.getFullYear() + "-" + month + "-" + day + " 23:59:59";
}

export { getMonthFirstDate, getMonthLastDate };