Element-UI的DatePicker禁用日期选择（type=date/daterange）

最新推荐文章于 2025-05-26 10:25:27 发布

sleepwalker_1992

最新推荐文章于 2025-05-26 10:25:27 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Element-UI 文章标签： vue.js elementui el-date-picker

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/129768752

Element-UI 专栏收录该内容

12 篇文章

订阅专栏

文章展示了如何在ElementUI中使用日期选择器组件，包括禁用今天之前的日期、禁用今天之后的日期以及限制日期选择范围到今天、今天前一周和今天后一周的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、版本

"element-ui": "^2.15.13",

2、日期选择器，禁用今天之前的日期选择

选择日：type="date"

选择日期范围：type="daterange"

// 日期选择器，禁用今天之前的日期选择
<template>
  <div>
    <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        @change="dateChange">
    </el-date-picker>
  </div>
</template>
<script>

export default {
    name: 'log',
    data() {
        return {
            dateValue: '',
            pickerOptions: {
                disabledDate: (time) => {
                    // 禁用今天之前的日期选择
                    return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000; 
                },
            },
        };
    },
    methods: {
        dateChange(val) {
            console.log(val);
        },
    },
}
</script>
<style scoped>
</style>

选择日，效果：

选择日期范围，效果：

3、日期选择器，禁用今天之后的日期选择

选择日：type="date"

选择日期范围：type="daterange"

// 日期选择器，禁用今天之后的日期选择
<template>
  <div>
    <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        @change="dateChange">
    </el-date-picker>
  </div>
</template>
<script>
export default {
    name: 'log',
    data() {
        return {
            dateValue: '',
            pickerOptions: {
                disabledDate: (time) => {
                    // 禁用今天之后的日期选择
                    return time.getTime() > new Date().getTime(); 
                },
            },
        };
    },
    methods: {
        dateChange(val) {
            console.log(val);
        },
    },
}
</script>
<style scoped>
</style>

选择日，效果：

选择日期范围，效果：

4、日期选择器，限制可选日期范围

选择日：type="date"

选择日期范围：type="daterange"

例如：可选今天、今天前一周、今天后一周

// 日期选择器，可选今天、今天前一周、今天后一周
<template>
  <div>
    <el-date-picker
        v-model="dateValue"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        @change="dateChange">
    </el-date-picker>
  </div>
</template>
<script>
export default {
    name: 'log',
    data() {
        return {
            dateValue: '',
            pickerOptions: {
                disabledDate: (time) => {
                    // 可选今天、今天前一周、今天后一周
                    return time.getTime() < new Date().getTime() - 8 * 24 * 60 * 60 * 1000 || time.getTime() > new Date().getTime() + 7 * 24 * 60 * 60 * 1000; 
                },
            },
        };
    },
    methods: {
        dateChange(val) {
            console.log(val);
        },
    },
}
</script>
<style scoped>
</style>

选择日，效果：