基于elementUI的el-date-picker实现只能选择当前时间点之后的时间

在工作中实现一个需求的时候,相信平时小伙伴在工作中会经常遇到这类型需求,所以记录一下,希望对有需要的小伙伴有用处

大概描述一下需求:时间选择的需求,只能选择当前时间点之后的时间

背景:技术栈为vue,element-ui

<template>
    <div>
        <el-date-picker
        popper-class="now-data-picker"
        v-model="myTime"
        :picker-options="{
            disabledDate(time) {
                return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
            },
            selectableRange: startTimeRange
        }"
        :editable="false"
        type="datetime"
        placeholder="请选择时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
    </div>
</template>

<script>
import moment from 'moment'

export default {
    name: "DateComponent",
    data() {
        return {
            // 时间
            myTime: '',
            // 可选的时间范围
            startTimeRange: ''
        }
    },
    watch: {
        myTime:{
            handler(newValue, oldValue) {
                if(newValue){
                    let nowDate = moment().format('YYYY-MM-DD HH:mm:ss');
                    let dt = nowDate.split(" ");
                    let st = '';

                    if(newValue.split(" ")[0] == dt[0]){
                        // 如果是当天,选择的时间开始为此刻的时分秒
                        st = dt[1];
                        // 如果是当天(只有当日期改变时),默认选中时间为当前时间
                        if (newValue.split(" ")[0] != oldValue.split(" ")[0]) {
                            this.myTime = nowDate;
                        }
                    }else{
                        // 明天以及后面的时间从0时开始
                        st = '00:00:00';
                    }
                    
                    this.startTimeRange =  st + ' - 23:59:59'; 
                    //例如:如果今天此刻时间为15:27:00 则选择时间范围为: 15:27:00 - 23:59:59  
                    //否则为:00:00:00 - 23:59:59
                } 
            }
        }
    },
};
</script>

以上是我对该需求的实现,由于目前还是一个小白,写文章更多是为了自己的知识的一个总结,其中可能会出现错误或者还有其他更好的方案实现,欢迎指出

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在表单验证规则中同时限制el-date-picker和el-time-picker组件只能选择距离当前时间之后1小时的时间,您可以使用自定义的验证规则来实现。以下是一个示例代码,演示如何使用自定义验证规则来限制el-date-picker和el-time-picker的选择范围: ```html <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item label="选择日期" prop="selectedDate"> <el-date-picker v-model="formData.selectedDate" type="date" :picker-options="datePickerOptions"></el-date-picker> </el-form-item> <el-form-item label="选择时间" prop="selectedTime"> <el-time-picker v-model="formData.selectedTime" :picker-options="timePickerOptions"></el-time-picker> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { formData: { selectedDate: '', // 选中的日期 selectedTime: '', // 选中的时间 }, formRules: { selectedDate: [ { required: true, message: '请选择日期', trigger: 'change' }, { validator: this.validateSelectedDateTime, trigger: 'change' }, ], selectedTime: [ { required: true, message: '请选择时间', trigger: 'change' }, { validator: this.validateSelectedDateTime, trigger: 'change' }, ], }, datePickerOptions: { disabledDate: this.disabledDate, // 自定义禁用日期函数 }, timePickerOptions: { disabledMinutes: this.disabledMinutes, // 自定义禁用分钟函数 }, }; }, methods: { validateSelectedDateTime(rule, value, callback) { const currentDateTime = new Date(); // 获取当前日期时间 const oneHourLater = new Date(currentDateTime.getTime() + 3600000); // 计算1小时后的日期时间 if (value && value.getTime() < oneHourLater.getTime()) { callback(new Error('只能选择距离当前时间之后1小时的时间')); } else { callback(); } }, disabledDate(date) { // 自定义禁用日期函数,如果需要禁用某些日期,可以在这里处理 const currentDateTime = new Date(); const oneHourLater = new Date(currentDateTime.getTime() + 3600000); return date && date.getTime() < oneHourLater.getTime(); }, disabledMinutes() { // 自定义禁用分钟函数,如果需要禁用某些分钟,可以在这里处理 return []; }, submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,继续提交逻辑 // ... } else { // 表单验证不通过,显示错误信息 // ... } }); }, }, }; </script> ``` 在上述代码中,我们使用自定义的验证规则`validateSelectedDateTime`来限制el-date-picker和el-time-picker组件只能选择距离当前时间之后1小时的时间。通过在验证规则中与当前时间进行比较,如果选中的日期时间早于当前时间加1小时,则会触发验证失败。 同时,我们还可以通过设置`datePickerOptions`的`disabledDate`属性来自定义禁用的日期,以及设置`timePickerOptions`的`disabledMinutes`属性来自定义禁用的分钟。如果有特定的日期或分钟需要禁用,可以在相应的函数中进行处理。 此外,我们使用了Element UI的表单组件和验证规则,通过调用`this.$refs.form.validate`方法来触发表单验证。在提交表单时,会自动进行验证,并根据验证结果执行相应的逻辑。 请注意,以上代码仅为示例,具体实现方式可能会因您所使用的框架或库而有所不同。请根据实际情况进行调整。希望对您有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值