实现el-date-picker组件只允许选择当前与往后的时间如何实现

实现el-date-picker组件只允许选择当前与往后的时间如何实现

本文主要是讲述如何实现关于element-ui框架中DatePicker,DateTimePicker组件只允许选择当前与往后的时间如何实现

一.实现DatePicker只允许选择当前与往后的时间如何实现

第一步：绑定时间，设置datatime类型（单选日期类型），设置格式（format），绑定picker-options,设置change事件

 <el-date-picker
   style="width: 220px"
   v-model="info.beginTime"
   type="datetime"
   placeholder="开始时间"
   format="yyyy-MM-dd HH:mm"
   :picker-options="pickerOption" 
   @change="beginDateChange"
   >
</el-date-picker>

第二步：定义pickerOption，限制日期

data() {
    return {
         pickerOption: {
             disabledDate: (time) => {
                 return Date.now() - 3600 * 1000 * 24 > time.getTime();
             },
         },
    }
}
// 当能选择的日期大于当前时间戳时，即返回false，反之返回true，即禁用

第三步：限制时，分

methods:{
    beginDateChange(data) {
        if(!data) return
        let startAt = new Date(date).getTime();
        if (startAt < Date.now()) {
            this.info.beginTime = new Date();
        }
    }
}
// 判断当前的事件戳是否大于选择的时间戳，如果是则设置成当前的事件戳,不过我建议往后面推10分钟,主要看你的需求，同时要封装一个时间函数去转换，或者使用第三方包
new Date().getTime() + 60*10*1000

二.实现DateTimePicker只允许选择当前与往后的时间如何实现

第一步：同样时与上方基本一致

<el-date-picker
                align="right" 
                @change="dateChange" 
                v-model="insertData.timeValue"  // 这里绑定的是一个数组，之前那个绑定的是一个字符串
                type="datetimerange"       // 多选时间的类型
                range-separator="至"          // 下面3个字段代替了placeholder
                start-placeholder="开始日期" 
                end-placeholder="结束日期"
                :picker-options="pickerOption"
                format="yyyy-MM-dd HH:mm">
</el-date-picker>

第二步：同样限制日期

data() {
    return {
        pickerOption: {
            disabledDate: (time) => {
                return Date.now() - 3600 * 1000 * 24 > time.getTime();
            },
        },
    }
}

第三步：封装转换时间函数

methods:{
    timeConversion(e) {
        const inputDate = new Date(e); 
        const year = inputDate.getFullYear();
        const month = inputDate.getMonth() + 1; // 月份从0开始，需要加1
        const date = inputDate.getDate();
        const hours = inputDate.getHours();
        const minutes = inputDate.getMinutes();
        const seconds = inputDate.getSeconds();
        const formattedDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
        return formattedDate;
    },
}

第四步：限制时，分

methods:{
    dateChange(e) {
        // e是你绑定的那个字段，是一个数组，由于你是多选，即是开始与结束两个元素
        if(e) {
            let startAt = new Date(this.timeConversion(e[0])).getTime()
            let endtAt = new Date(this.timeConversion(e[1])).getTime()
            if(startAt < Date.now()) {
                // 由于项目问题，我这里开始时间往后面推了10分钟
                this.insertData.start_time = this.timeConversion(new Date().getTime()+60*10*1000)  
                // 这里结束推了40分钟
                this.insertData.end_time = this.timeConversion(new Date().getTime()+60*40*1000)
                // 设置开始，与结束给绑定的数组，让数据回显
                this.insertData.timeValue = [this.insertData.start_time,this.insertData.end_time]
            }
        }
    },
}