element UI 之日期时间选择器

需求：选中开始日期后，只允许选择当月日期，其它月份日期禁用，简单点就是不允许跨月选择日期，只能选中当月日期，效果如下图，实现代码如下

时间日期选择器.png

<template>
  <el-date-picker
    v-model="searchDate"
    type="daterange"
    value-format="yyyy-MM-dd"
    @change="changeSearchDate"
    align="center"
    unlink-panels
    clear-icon="el-icon-circle-close"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      searchDate: null, //时间日期选择器
      startTime: null, //拿到日期选择器的开始日期
      pickerOptions: {
        disabledDate: (time) => {
          if (this.searchDate == null) {
            return false;
          } else {
            const date = new Date(this.startTime);
            return time.getMonth() != date.getMonth();
          }
        },
        onPick: (date) => {
          if (date.minDate) {
            this.searchDate = date.minDate;
            this.startTime = date.minDate;
          } else {
            this.searchDate = null;
          }
        },
      },
    };
  },
};
</script>