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

在这里插入图片描述

    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()
            }
        }
    }

在这里插入图片描述

Element UI的`el-form-item`中添加时间选择,你可以使用内置的时间选择组件`el-date-picker`,并设置其类型为时间(`type="time"`),同时需要将表单数据绑定到时间戳格式。以下是基本步骤: 1. 首先,在`<el-form-item>`标签内引入时间选择组件: ```html <el-form-item label="时间选择"> <el-date-picker v-model="formData.time" type="time" placeholder="选择时间"></el-date-picker> </el-form-item> ``` 这里`v-model="formData.time"`表示时间的选择将会被双向绑定到名为`formData`的对象的`time`属性上。 2. 确保你的表单数据对象`formData`中有一个用于存储时间戳的字段,例如: ```javascript data() { return { formData: { time: '', // 初始值为空字符串,可以改为0或其他默认时间戳 }, }; } ``` 3. 当用户选择时间后,`el-date-picker`会返回一个时间对象,你需要将其转换为时间戳。你可以在`watch`、`beforeUpdate`等生命周期钩子中处理这个转换: ```javascript methods: { convertToTimestamp(date) { if (date) { return date.getTime(); // 返回的是毫秒数,通常我们会除以1000得到秒级时间戳 } else { return null; // 或者返回空值 } }, }, watch: { formData: { handler(newFormData, oldFormData) { this.formData.time = this.convertToTimestamp(newFormData.time); }, deep: true, // 如果时间对象有变动,也需要更新时间戳 }, }, ``` 现在,当用户在时间选择中选择时间,`formData.time`就会是一个时间戳了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值