vue中el-date-picker时间选择器的判断开始时间不大于结束时间

这前端是真的难,就这一个校验搞了快大半天,查出来的结果还都不怎么好用。
最后是参考的http://www.manongjc.com/detail/16-hyixjugqukmcvjc.html
在自己这记录一下。

<el-form-item label="开始时间" prop="dateFrom">
          <el-date-picker
            clearable
            size="small"
            v-model="form.dateFrom"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            @change="handelDateFrom"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="dateTo">
          <el-date-picker
            clearable
            size="small"
            v-model="form.dateTo"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            @change="handelDateTo"
          ></el-date-picker>
        </el-form-item>
data () {
    return {
    	//这个例子在上午的时候用过了,并没有生效,是这里忘了加双向绑定。。。。
		dateFrom: null, 
      	dateTo: null,
		}
    }
    // 表单校验
      rules: {
        
        dateFrom: [
          { required: true, message: "开始时间不能为空", trigger: "change" },
          {
            validator: this.validationDateFrom
          }
        ],
        dateTo: [
          { required: true, message: "结束时间不能为空", trigger: "change" },
          {
            validator: this.validationDateTo
          }
        ]
      }
methods: {
    // 自定义验证规则(校验开始日期)
    validationDateFrom: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算,不运算的时候,显示中国标准时间格式)
      if (
        new Date(this.form.dateTo) - new Date(value) <= 0 &&
        this.form.dateTo &&
        value
      ) {
        return callback(new Error('*开始时间不能大于结束时间'))
      }
      callback()
    },
    // 自定义验证规则(校验截止日期)
    validationDateTo: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算,不运算的时候,显示中国标准时间格式)
      if (
        new Date(value) - new Date(this.form.dateFrom) <= 0 &&
        this.form.dateTo &&
        value
      ) {
        return callback(new Error('*结束时间不能小于开始时间'))
      } callback()
    },
    // 当开始时间变化时,需要重新校验
    handelDateFrom (value) {
      if (
        new Date(this.form.dateTo) - new Date(value) > 0 &&
        this.form.dateTo &&
        value
      ) {
        // 重新校验
        this.$refs.form.validate()
      }
    },
    handelDateTo (value) {
      if (
        new Date(value) - new Date(this.form.dateFrom) > 0 &&
        this.form.dateFrom &&
        value
      ) {
        this.$refs.form.validate()
      }
    }
}
上一篇:微信小程序picker组件两列关联使用方式


下一篇:27HUI - picker(huiPicker)