DatePicker组件—常用功能示例

目录

一、概述

二、详解

---

一、概述

ElementUI框架中日期选择器的常用操作。

二、详解

示例1：禁止选择今天之后的日期

如下代码所示，添加picker-options属性，即可实现目标需求。 

<template>
    <el-date-picker 
        v-model="date"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
    ></el-date-picker>
</template>
<script>
export default{
    data() { 
        return {
            date: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        };
    }
}
</script>

示例2：禁止选择今天之前的日期，不包括今天

<template>
    <el-date-picker 
        v-model="date"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
    ></el-date-picker>
</template>
<script>
export default{
    data() { 
        return {
            date: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < (Date.now()-(24 * 60 * 60 * 1000));
                }
            }
        };
    }
}
</script>

示例3：禁止选择今天之前的日期，包括今天

<template>
    <el-date-picker 
        v-model="date"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
    ></el-date-picker>
</template>
<script>
export default{
    data() { 
        return {
            date: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() <= (Date.now());
                }
            }
        };
    }
}
</script>