如何自动计算两个日期之间的天数

1.首先在页面写出时间选择器

代码如下：

 

<el-col :span="12">
   <el-form-item label=" 开始日期" prop="realStartDate">
       <el-date-picker
          v-model="dataForm.realStartDate"
          placeholder="请选择"
          clearable
          :style="{ width: '100%' }"
          type="date"
          @change="changeDate('realStartDate')"
          :picker-options="pickerOptions('realStartDate')"
          value-format="yyyy-MM-dd">
        </el-date-picker>
    </el-form-item>
</el-col>
<el-col :span="12">
   <el-form-item label=" 结束日期" prop="realEndDate">
      <el-date-picker
         v-model="dataForm.realEndDate"
         placeholder="请选择"
         clearable
         :style="{ width: '100%' }"
         @change="changeDate('realEndDate')"
         :picker-options="pickerOptions('realEndDate')"
         value-format="yyyy-MM-dd">
       </el-date-picker>
    </el-form-item>
</el-col>
<el-col :span="12">
    <el-form-item label=" 天数" prop="realConstructionDay">
       <el-input
          v-model="dataForm.realConstructionDay"
          placeholder="请输入"
          disabled
          :style="{ width: '100%' }">
           <template slot="append">天</template>
       </el-input>
     </el-form-item>
</el-col>

2.写方法计算时间

 changeDate(key) {
      const {
        realStartDate,
        realEndDate
      } = this.dataForm;
      if (
        (key === "realStartDate" && realEndDate) ||
        (key === "realEndDate" && realStartDate)
      ) {
        this.dataForm.realConstructionDay =
          dayjs(realEndDate).diff(realStartDate, "day") + 1;
      }
    },

 3.在计算中用到了day.js函数 所以要导入dayjs

import dayjs from "dayjs"