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

这篇具有很好参考价值的文章主要介绍了Element-UI的DatePicker禁用日期选择（type=date/daterange）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

选择日，效果：

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

选择日期范围，效果：

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

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>

选择日，效果：

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

选择日期范围，效果：

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

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>

选择日，效果：

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