element plus中el-date-picker动态设置时间禁用范围

最新推荐文章于 2025-12-01 15:11:16 发布

原创最新推荐文章于 2025-12-01 15:11:16 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

13 篇文章

订阅专栏

要求选择日月年时左边开始结束时间的格式分别为：YYYY-MM-DD, YYYY-MM,YYYY
然后设置时间禁用范围。
在这里插入图片描述
element plus中el-date-picker的禁用属性改了。

<el-form
      class="search-form"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="0"
    >
      <el-form-item label="" prop="startTime">
        <el-date-picker
          size="small"
          v-model="queryParams.startTime"
          :type="dataPickerType"
          :format="dataPickerFormat"
          :value-format="dataPickerFormat"
          placeholder="开始"
          style="width: 100px"
          :disabled-date="disabledStartDate"
          @change="handlePicker"
        />
      </el-form-item>

      <el-form-item label="" prop="endTime">
        <el-date-picker
          size="small"
          v-model="queryParams.endTime"
          :type="dataPickerType"
          :format="dataPickerFormat"
          :value-format="dataPickerFormat"
          placeholder="结束"
          style="width: 100px"
          :disabled-date="disabledEndDate"
          @change="handlePicker"
        />
      </el-form-item>

      <el-form-item label="" prop="dateType">
        <el-radio-group
          v-model="queryParams.dateType"
          size="small"
          @change="handleRadio"
        >
          <el-radio-button :value="0">日</el-radio-button>
          <el-radio-button :value="1">月</el-radio-button>
          <el-radio-button :value="2">年</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>

const dataPickerType = computed(() => {
  const typeMap = {
    1: "month",
    2: "year",
  };
  return typeMap[queryParams.value.dateType] || "date";
});

const dataPickerFormat = computed(() => {
  const typeMap = {
    1: "YYYY-MM",
    2: "YYYY",
  };
  return typeMap[queryParams.value.dateType] || "YYYY-MM-DD";
});
const disabledStartDate = (date) => {
  if (queryParams.value.endTime) {
    return date.getTime() > new Date(queryParams.value.endTime).getTime();
  }
  return false;
};
const disabledEndDate = (date) => {
  if (queryParams.value.startTime) {
    return date.getTime() < new Date(queryParams.value.startTime).getTime();
  }
  return false;
};