vue项目中view-ui两个时间选择器的判断开始时间不大于结束时间

Posted 2021-02-19 yihengbaobei

表单校验，不控制时间选择器上的时间，代码如下：

<template>
  <Form
    ref="formItem"
    :model="formItem"
    :rules="rulesForm"
    :label-width="170"
    label-position="left"
  >
    <!-- 临时开放日期 -->
    <Form-item label="临时开放开始日期" prop="starttime">
      <Date-picker
        type="date"
        placeholder="请选择可临时开放开始日期"
        name="lskfksrq"
        v-model="formItem.starttime"
        style="width: 400px"
        @on-change="handelStartTime"
      ></Date-picker>
    </Form-item>
    <!-- 临时开放截止日期 -->
    <Form-item label="临时开放截止日期" prop="endtime">
      <Date-picker
        type="date"
        placeholder="请选择可临时开放截止日期"
        name="lskfjzrq"
        v-model="formItem.endtime"
        style="width: 400px"
        @on-change="handelEndTime"
      ></Date-picker>
    </Form-item>
    <Form-item>
      <i-button type="primary" @click="handleSubmit(‘formItem‘)">提交</i-button>
      <i-button @click="handleReset(‘formItem‘)" style="margin-left: 8px">重置</i-button>
    </Form-item>
  </Form>
</template>
<script>
export default {
  data () {
    return {
      formItem: {
        starttime: ‘‘, // 临时开放开始日期
        endtime: ‘‘ // 临时开放截止日期
      },
      rulesForm: {
        starttime: [
          {
            required: true,
            type: ‘date‘,
            message: ‘*请选择临时开放开始日期‘
          },
          {
            validator: this.validationStarttime
          }
        ],
        endtime: [
          {
            required: true,
            type: ‘date‘,
            message: ‘*请选择临时开放截止日期‘
          },
          {
            validator: this.validationEndtime
          }
        ]
      }
    }
  },
  methods: {
    // 自定义验证规则(校验开始日期)
    validationStarttime: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算，不运算的时候，显示中国标准时间格式)
      if (
        new Date(this.formItem.endtime) - new Date(value) <= 0 &&
        this.formItem.endtime &&
        value
      ) {
        return callback(new Error(‘*临时开放开始日期不能晚于临时开放截止日期‘))
      }
      callback()
    },
    // 自定义验证规则(校验截止日期)
    validationEndtime: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算，不运算的时候，显示中国标准时间格式)
      if (
        new Date(value) - new Date(this.formItem.starttime) <= 0 &&
        this.formItem.endtime &&
        value
      ) {
        return callback(new Error(‘*临时开放截止日期不能早于临时开放开始日期‘))
      } callback()
    },
    // 当开始时间变化时,需要重新校验
    handelStartTime (value) {
      if (
        new Date(this.formItem.endtime) - new Date(value) > 0 &&
        this.formItem.endtime &&
        value
      ) {
        // 重新校验
        this.$refs.formItem.validate()
      }
    },
    handelEndTime (value) {
      if (
        new Date(value) - new Date(this.formItem.starttime) > 0 &&
        this.formItem.starttime &&
        value
      ) {
        this.$refs.formItem.validate()
      }
    },
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success(‘Success!‘)
        } else {
          this.$Message.error(‘Fail!‘)
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>