elementUI 选择年份只能选前一年或者后一年

最新推荐文章于 2025-10-27 12:39:15 发布

原创最新推荐文章于 2025-10-27 12:39:15 发布 · 4.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

elementUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 Element UI 的日期选择器组件限制用户仅能选择当前年份之前的一年或之后的一年，并通过 JavaScript 实现自定义的 disabledDate 函数来达到这一目的。

选择前一年：

<el-form-item label="年份:" prop="pro_years">
  <el-date-picker
    v-model="getFormData.pro_years"
    type="year"
    style="width: 100%"
    :disabled="getNotUse"
    format="yyyy"
    value-format="yyyy"
    :picker-options="pickerOptions"
    placeholder="请选择年份">
  </el-date-picker>
</el-form-item>

return {

pickerOptions: {
    disabledDate: (time) => {
        let minYear = new Date().getFullYear() - 1
        return time > Date.now() || time.getTime() < new Date(JSON.stringify(minYear))
    }
},

}

效果：

选择后一年：

<el-form-item label="年份:" prop="pro_years">
  <el-date-picker
    v-model="getFormData.pro_years"
    type="year"
    style="width: 100%"
    :disabled="getNotUse"
    format="yyyy"
    value-format="yyyy"
    :picker-options="pickerOptions"
    placeholder="请选择年份">
  </el-date-picker>
</el-form-item>

return {

return {
    pickerOptions:{
        disabledDate: (time) => {
            let nowYear = new Date().getFullYear();
            return time.getFullYear()>nowYear+1;
        }
    },

}

效果：