zoukankan      html  css  js  c++  java
  • element ui实现form验证起始时间不能大于结束时间

            <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime">
                <el-date-picker v-model="form.startTime" type="datetime" format='yyyy-MM-dd HH:mm' value-format="yyyy-MM-dd HH:mm"
                    :picker-options="pickerOptionsStart" default-time="08:00:00" placeholder="选择开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
                <el-date-picker v-model="form.endTime" type="datetime" format='yyyy-MM-dd HH:mm' value-format="yyyy-MM-dd HH:mm"
                    :picker-options="pickerOptionsEnd" default-time="20:00:00" placeholder="选择结束时间">
                </el-date-picker>
            </el-form-item>
    		data() {
    			return {
    				form: {
    					startTime: '',
    					endTime: ''
    				},
    				rules: {
    					startTime: [{
    						required: true,
    						message: '请选择开始时间',
    						validator: this.pickerOptionsStart,
    						trigger: 'change'
    					}],
    					endTime: [{
    						required: true,
    						message: '请选择结束时间',
    						validator: this.pickerOptionsEnd,
    						trigger: 'change'
    					}]
    				},
    				pickerOptionsStart: {
    					disabledDate: time => {
    						let endDateVal = this.form.endTime;
    						if (endDateVal) {
    							return time.getTime() > new Date(endDateVal).getTime();
    						}
    					}
    				},
    				pickerOptionsEnd: {
    					disabledDate: time => {
    						let beginDateVal = this.form.startTime;
    						if (beginDateVal) {
    							return (time.getTime() < new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000)
    						}
    					}
    				}
    			}
    		}
    

      

      

  • 相关阅读:
    SQL——with as 临时表
    SQL 在数据库中查找拥有此列名的所有表
    帆软报表(finereport)鼠标悬停背景变色
    帆软报表(finereport)控件背景色更改
    帆软报表(finereport)使用Event 事件对象 (target)修改提示框样式
    微信indexOf不能使用,代替方式
    基础知识
    VUE知识点
    银行金额处理
    flex-1
  • 原文地址:https://www.cnblogs.com/baller/p/13913807.html
Copyright © 2011-2022 走看看