element ui 日期选择器禁止跨年选择-选择年份区间

不好【】

已于 2023-05-26 11:31:40 修改

阅读量926

点赞数 2

分类专栏： elementul 文章标签： vue.js elementui

于 2023-05-26 11:12:56 首次发布

本文链接：https://blog.csdn.net/weixin_68052550/article/details/130882690

版权

elementul 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js项目中使用ElementUI的日期选择器组件，特别是如何设置禁用未来的日期以及早于2020年的日期。通过`picker-options`属性和`disabledDate`函数，可以控制用户可以选择的年份范围。

摘要由CSDN通过智能技术生成

未设置日期选择时：

设置之后的样子：

废话不多说直接上代码

<el-date-picker v-model="yearVal" type="year" placeholder="请选择年份"
 @change="loadData()" :picker-options="pickerOptions" format="yyyy"
 value-format="yyyy">

pickerOptions: {
    disabledDate(data) {
        let year = new Date().getFullYear()
        return (
           data.getTime() > new Date(year + '-12-31').getTime() ||
            data.getTime() < new Date('2020-01-01').getTime()
        )
     }
}

同理，在项目中用到element的时间选择器的时候，可以在picker-options中进行设置，原理同上一样