element ui中日期选择插件，带日期验证

最新推荐文章于 2024-08-08 14:23:19 发布

啥也不懂的咸菜鱼

最新推荐文章于 2024-08-08 14:23:19 发布

阅读量1.2k

点赞数

分类专栏： element ui

本文链接：https://blog.csdn.net/qq_45279746/article/details/108713572

版权

element ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上篇文章已经介绍了相关的按需引入组件的方法，这里不做多余赘述。
html部分：

el-form-item label="日期" class="ser_option2">
   <el-col :span="11">
   <el-form-item prop="startTime">
       <el-date-picker class="input" type="date" placeholder="开始日期" v-model="ruleForm.startTime" style="width: 100%;"
            :picker-options="startDatePicker"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
       ></el-date-picker>
   </el-form-item>
   </el-col>
   <el-col class="line" :span="2">-</el-col>
   <el-col :span="11">
   <el-form-item prop="endTime">
       <el-date-picker class="input" type="date" placeholder="结束日期" v-model="ruleForm.endTime" style="width: 100%;"
           :picker-options="endDatePicker"
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
       ></el-date-picker>
   </el-form-item>
   </el-col>
</el-form-item>

js部分
picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期,有一个参数是当前选择的日期，因此我们常用这个方法来进行日期范围的验证

// 开始时间限制
        beginDate(){
            const self = this
            return {
                disabledDate:time=>{
                    let endDateVal = new Date(self.ruleForm.endTime).getTime()
                    if (self.ruleForm.endTime) {  //如果结束时间不为空，则小于结束时间
                        return time.getTime()>Date.now(self.ruleForm.endTime)||time.getTime()>new Date(self.ruleForm.endTime).getTime()
                    }else{
                        return time.getTime()< new Date(self.ruleForm.endTime).getTime||time.getTime()>Date.now()||time.getTime()>Date.now(self.ruleForm.endTime)
                    }
                }
            }
        },
        // 结束时间限制
        processDate() {
            const  self = this
            return {
                disabledDate:time=> {
                    if (self.ruleForm.startTime) {  //如果开始时间不为空，则结束时间大于开始时间
                        return time.getTime()<new Date(self.ruleForm.startTime).getTime()||time.getTime()>Date.now()||time.getTime()>Date.now(self.ruleForm.startTime)
                        console.log(beginDateVal)
                    } 
                }
            }
        },

data部分：

 ruleForm: {
    startTime: '',
     endTime: '',
 },
 rules: {
     startTime: [
         { required: true, message: '请选择日期', trigger: 'change' }
     ],
     endTime: [
         { required: true, message: '请选择日期', trigger: 'change' }
     ],
 },
 startDatePicker: this.beginDate(),
 endDatePicker: this.processDate(),

另外，注意如果页面引用其他组件，命名的时候不要命名Date组件，不然你的Date对象就不能使用了