el-date-picker 最后的时间只能在第一个时间范围

最新推荐文章于 2025-03-30 15:01:12 发布

学不会•

最新推荐文章于 2025-03-30 15:01:12 发布

阅读量184

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_41588991/article/details/136902156

版权

<template>
  <div>
    <el-form :model="form">

      <el-form-item label="死亡日期">
        <el-date-picker v-model="form.dieTime" type="date" placeholder="选择日期" :picker-options="pickerOptions1" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changedieTime()">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="最后接触时间">
        <el-date-picker v-model="form.lastTime" type="date" placeholder="选择日期" :picker-options="pickerOptions" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changedieTime()">
        </el-date-picker>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data () {
    return {
      form: {
        dieTime: '',
        lastTime: ''
      },
      pickerOptions1: {
        //死亡日期
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      },
      pickerOptions: {
        //最后接触时间
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      }
    }
  },
  methods: {
    changedieTime () {
      let time2 = moment(this.form.dieTime).format("YYYY-MM-DD");
      let time1 = moment(this.form.lastTime).format("YYYY-MM-DD");
      if (moment(time1).diff(time2, "day") < 0) {
        // 如果最后接触时间小于死亡日期，清空最后接触时间
        this.form.lastTime = null;
      }
      let dieTime = this.form.dieTime;
      if (dieTime) {
        this.pickerOptions = {
          disabledDate (time) {
            // 选择死亡，则“最后接触日期”≥“死亡日期”
            return (
              time.getTime() < new Date(dieTime).getTime() - 8.64e7 ||
              time.getTime() > Date.now()
            );
          },
        };
      }
    }
  }
}
</script>

<style>
</style>