element-ui 日期时间选择器 ,利用时间戳实现表单验证

发布于:2023-01-02 ⋅ 阅读:(859) ⋅ 点赞:(0)

在这里插入图片描述

    rules: {
          startTime: [ { validator:this.getValidatorTime(), trigger: "change" }],
         endTime: [ { validator:this.getValidatorTime(), trigger: "change" }],
    },
 
     //验证时间
    getValidatorTime(){
        return (rule, value, callback) => {
            console.log(rule,value, this.postData.startTime,this.postData.endTime)
            if( this.postData.startTime || this.postData.endTime ){
                let startTime = new Date(this.postData.startTime).getTime()
                let endTime = new Date(this.postData.endTime).getTime()
                if( startTime >= endTime ){
                    if( rule.field === 'startTime' ){
                        callback(new Error("开始时间必须小于结束时间"));
                    }
                    else{
                        callback(new Error("结束时间必须大于开始时间"));
                    }
                }
            }
            else{
                callback();
            }
        }
    }

补充:使用picker-options对选择器进行限制

 :picker-options="pickerStartOptions"  //开始时间
 :picker-options="pickerEndOptions"  //结束时间

	data() {
 		return {
			 pickerStartOptions: this.pickerStartOptionsFun(),
             pickerEndOptions: this.pickerEndOptionsFun(),
		}
	}
	
	//  筛选结束选择器时间
  pickerEndOptionsFun() {
        let that = this
        return {
            disabledDate(time){
                return time.getTime() < new Date(that.postData.startTime).getTime()
            }
        }
    }
	
	// 筛选开始选择器时间
    pickerStartOptionsFun() {
        let that = this
        return {
            disabledDate(time){
                return time.getTime() > new Date(that.postData.endTime).getTime()
            }
        }
    }

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到