可以通过设置 DateTimePicker 组件的属性来实现最大跨度只可查一年的功能。

具体做法如下:

  1. 在 DateTimePicker 组件中设置 type 属性为'date',表示只选择日期,不选择时间。
  2. 设置 picker-options 属性,该属性为一个对象,包含了 DateTimePicker 组件的所有选项。在该对象中设置 disabledDate 属性,该属性为一个函数,用于判断某个日期是否可选。在该函数中,可以通过比较当前日期和一年前的日期来判断是否可选。如果当前日期减去一年后小于等于一年前的日期,则该日期不可选。

示例代码如下:

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="date"
      :picker-options="pickerOptions"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate: (time) => {
          const yearAgo = new Date(new Date().getFullYear() - 1, 0, 1);
          return time.getTime() > Date.now() || time.getTime() < yearAgo.getTime();
        }
      }
    };
  }
};
</script>

在上述代码中,disabledDate 函数中,通过 new Date().getFullYear() 获取当前年份,然后减去 1,得到一年前的年份。然后通过 new Date(yearAgo, 0, 1) 获取一年前的日期。最后比较当前日期和一年前的日期,判断是否可选。

注意:在 picker-options 属性中,可以设置所有 DateTimePicker 组件的选项,包括日期格式、快捷选项等。具体可参考 Element UI 官方文档。

Element UI 日期时间选择器限制选择范围:仅允许查询一年

原文地址: https://www.cveoy.top/t/topic/jCTb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录