Element UI的日期范围选择：限制选定日期在30天内

西红柿又名小番茄

已于 2024-09-11 10:27:22 修改

阅读量508

点赞数

文章标签： vue.js elementui 前端

于 2024-09-11 10:25:51 首次发布

原文链接：https://blog.youkuaiyun.com/qq_41883423/article/details/137766527

版权

原文地址：【element】实现基于Element UI的日期范围选择：限制选定日期在30天内_daterange设置范围30天-优快云博客

在Web应用开发过程中，我们经常遇到需要用户在一个特定日期范围内做出选择的场景。使用Element UI的el-date-picker组件，我们可以轻松实现这一功能。本文将指导你如何设置el-date-picker，使得用户选择的第二个日期必须在第一个日期的30天之内，并且限制不允许选择未来的日期。

1. 添加`el-date-picker`组件

<el-date-picker
    v-model="date2"
    :format="'yyyy-MM-dd'"
    :value-format="'yyyy-MM-dd'"
    :picker-options="pickerOptions"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</el-date-picker>

2. 设置pickerOptions

在data函数中定义pickerOptions，包含disabledDate和onPick两个属性，用于控制日期的可选范围和处理用户的选择行为。

data() {
    return {
        selectDate: '', // 存储第一个选定日期的时间戳
        pickerOptions: {
            disabledDate: (time) => {
                if (this.selectDate !== '') {
                    const oneDay = 24 * 3600 * 1000; // 一天的毫秒数
                    const thirtyDays = 30 * oneDay; // 30天的毫秒数
                    const minTime = this.selectDate - thirtyDays;
                    const maxTime = this.selectDate + thirtyDays;
                    let today = new Date();
                    today.setHours(0, 0, 0, 0); // 设置为今天的0点
                    // 限制可选日期：不可早于minTime，不可晚于maxTime和今天
                    return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > today.getTime();
                }
            },
            onPick: ({ maxDate, minDate }) => {
                this.selectDate = minDate ? minDate.getTime() : '';
                if (maxDate) {
                    this.selectDate = '';
                }
            },
        }
    };
},