Element 根据日期选择器计算选中天数

最新推荐文章于 2025-11-21 15:30:50 发布

原创最新推荐文章于 2025-11-21 15:30:50 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

页面部分

<template>
  <el-form>
    <el-form-item
      label="实际维修开始时间"
      prop="acturalStartTime"
      label-width="140px"
      :rules="[
        {
          required: true,
          message: '请选择实际维修开始时间',
          trigger: 'blur',
        },
      ]"
    >
      <el-date-picker
        v-model="statuForm.acturalStartTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择实际维修开始时间"
        style="width: 100%"
        @change="calculateDuration"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item
      label="实际维修结束时间"
      prop="acturalEndTime"
      label-width="140px"
      :rules="[
        {
          required: true,
          message: '请选择实际维修结束时间',
          trigger: 'blur',
        },
      ]"
    >
      <el-date-picker
        v-model="statuForm.acturalEndTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择实际维修结束时间"
        style="width: 100%"
        @change="calculateDuration"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item
      label="实际修理天数"
      prop="acturaDuration"
      label-width="140px"
    >
      <el-input
        v-model="statuForm.acturaDuration"
        type="number"
        placeholder="请输入实际修理天数"
        :readonly="isDisabled"
      >
        <template slot="append">天</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      statuForm: {
        acturalStartTime: null,
        acturalEndTime: null,
        acturaDuration: null,
      },
      isDisabled: true, // 控制 `acturaDuration` 是否可编辑
    };
  },
  methods: {
    calculateDuration() {
      const { acturalStartTime, acturalEndTime } = this.statuForm;

      if (acturalStartTime && acturalEndTime) {
        const start = new Date(acturalStartTime);
        const end = new Date(acturalEndTime);

        // 判断开始日期是否晚于结束日期
        if (start > end) {
          this.$message.error('开始日期不能晚于结束日期');
          this.statuForm.acturalStartTime = null;
          this.statuForm.acturalEndTime = null;
          this.statuForm.acturaDuration = null;
          return;
        }

        // 计算天数差
        const duration = (end - start) / (1000 * 60 * 60 * 24);
        this.statuForm.acturaDuration = duration;
      } else {
        // 如果其中一个日期为空，清空天数
        this.statuForm.acturaDuration = null;
      }
    },
  },
};
</script>