element日期控件获取起始时间差相差多少月多少天

原创已于 2023-01-17 16:15:39 修改 · 553 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ui #时间控件

于 2023-01-17 15:08:17 首次发布

Vue 同时被 3 个专栏收录

17 篇文章

订阅专栏

16 篇文章

订阅专栏

Elementui

3 篇文章

订阅专栏

该代码示例展示了如何在Vue.js应用中利用moment.js插件计算两个日期之间的房租费用。用户选择开始和结束日期，然后点击计算按钮，程序会检查日期是否为空，计算日期差并处理特殊情况，如同一天算作一天的租金。

需求：计算房子租金，2023/01/17-2023/01/17算一天，求总的房租费用

<template>
  <div>
    <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>-
    <el-date-picker v-model="value2" type="date" placeholder="选择日期"> </el-date-picker>
    <div>一共{{ str || 0 }}</div>
    <el-button @click="countDate">计算</el-button>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      str: '',
      value1: '',
      value2: ''
    }
  },
  methods: {
    countDate() {
      if (!this.value2 || !this.value1) {
        this.$message({
          message: '抱歉，时间不可以为空',
          type: 'warning'
        })
      }
      this.countFun()
    },
    countFun() {
      // 计算月份天数
      // 比较日期大小
      // 相差的天数
      let startDay = new Date(this.value2),
        endDay = new Date(this.value1)
      let allday = moment(startDay).diff(moment(endDay), 'day')
      if (allday < 0) {
        startDay = this.value1
        endDay = this.value2
      }
      // 特殊处理：如2022/01/01-2022/01/01为1天
      // 两个日期一样加一天
      startDay = new Date(startDay.setDate(startDay.getDate() + 1))
      // 实际日期相差天数
      allday = moment(startDay).diff(moment(endDay), 'day')
      // 相差的月份
      const month = moment(startDay).diff(moment(endDay), 'month')
      // 当前年月相差有多少天
      const days = moment(moment(startDay).format('yyyy-MM')).diff(moment(moment(endDay).format('yyyy-MM')), 'day')
      // 起始月份总天数
      const endDayAllDay =moment(startDay, 'YYYY-MM').daysInMonth()
      console.log("天数",allday,days,endDayAllDay)
      this.str = `${month}月${allday < days
      ? allday<endDayAllDay?allday:(endDayAllDay - (allday - days))
      : allday - days}天`
    }
  }
}
</script>

总结：moment.js这个插件计算日期真的很有用~工欲善其事，必先利其器~