JavaScript日期相关计算

一、计算距离今天n天后或n天前的日期

首先定义两个公共的方法：月份日期数字转换；格式化日期形式(默认：年-月-日)

// 数字转换
changeNum (num) {
  if (num >= 10) {
    return num
  } else {
    return '0' + num
  }
},
// 格式化日期
formatDate (date) {
  var year = date.getFullYear()
  var month = this.changeNum(date.getMonth() + 1)
  var day = this.changeNum(date.getDate())
  return `${year}-${month}-${day}`
},

接下来就可以定义计算日期的方法了

/* data */
today: '', // 今天的日期
n: 1, // n天
expirationDays: null, // 距离今天n天后或n天前的日期
m: '', // 某个日期距离今天还有m天

/* methods*/
// 计算距离今天n天后或n天前的日期（如：到期日）
computeExpirationDays () {
  var nowDate = new Date()
  this.today = this.formatDate(nowDate)
  var beginTime = nowDate.getTime()
  var endTime = beginTime + this.n * 24 * 60 * 60 * 1000
  nowDate.setTime(endTime)
  this.expirationDays = this.formatDate(nowDate)
},

计算距离今天n天后或n天前的日期另一种写法：

// 某日期向前/向后num天
jumpNumDay(date, num, linkStr = '-') {
  date = new Date(date.getTime() + (num * 24 * 60 * 60 * 1000))
  return date.getFullYear() + linkStr + this.changeNum(date.getMonth() + 1) + linkStr + this.changeNum(date.getDate())
},

二、计算某个日期距离今天的天数

// 计算某个日期距离今天的天数（如：还有几天到期）
computeRemainingDays () {
  var nowDate = new Date()
  var nowTime = Date.parse(nowDate)
  var endDate = this.expirationDays + ' 23:59:59'
  var endTime = Date.parse(endDate)
  var ms = endTime - nowTime
  this.m = Math.floor(ms / (24 * 60 * 60 * 1000))
},

三、日期快捷选项（今日、昨日、本周、上周、本月、上月、今年、去年）

选择日期快捷选项：

不用快捷选项，使用日期选择器：

日期快捷选项禁用：

html代码

<v-card class="cardItem">
  <v-card-title class="subTitle">
    日期快捷选项
  </v-card-title>
  <v-card-text>
    <div class="rowAc">
      <div
        v-for="(item, index) in dateQuickSelection"
        :key="index"
        class="rowAc dateQuickItem"
        :class="{ active: chooseIndex === index, disabled: !dateQuickSwitch }"
        @click="chooseDateQuick(index)"
      >{{ item.name }}</div>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        value-format="yyyy-MM-dd"
        end-placeholder="结束日期"
        start-placeholder="开始日期"
        :clearable="false"
        range-separator="-"
        class="dataRangePicker"
        @change="chooseDateRange"></el-date-picker>
        <el-switch
          v-model="dateQuickSwitch"
          active-text="日期快捷选项是否可用"
          style="margin-left: 16px;"></el-switch>
    </div>
  </v-card-text>
</v-card>

data中定义的变量：

dateQuickSelection: [ // 日期快捷选择列表
  { code: "1", name: "今日" },
  { code: "2", name: "昨日" },
  { code: "3", name: "本周" },
  { code: "4", name: "上周" },
  { code: "5", name: "本月" },
  { code: "6", name: "上月" },
  { code: "7", name: "今年" },
  { code: "8", name: "去年" },
],
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
dateQuickSwitch: true, // 日期快捷选项是否可用

mounted调用方法：

mounted () {
  this.chooseDateQuick(0)
},

methods中定义的方法：

// 日期快捷选择事件
chooseDateQuick(index) {
  this.chooseIndex = index
  var tempCode = this.dateQuickSelection.find(ele => this.chooseIndex === Number(ele.code) - 1).code
  var tempDate = new Date()
  var year = tempDate.getFullYear()
  var month = tempDate.getMonth()
  var day = tempDate.getDate()
  var week = tempDate.getDay()
  this.dateRange = []
  if (tempCode === '1') { // 今日
    this.dateRange.push(this.formatDate(tempDate), this.formatDate(tempDate))
  } else if (tempCode === '2') { // 昨日
    this.dateRange.push(this.jumpNumDay(tempDate, -1, '-'), this.jumpNumDay(tempDate, -1, '-'))
  } else if (tempCode === '3') { // 本周
    this.dateRange.push(this.formatDate(new Date(year, month, day - week + 1)), this.formatDate(tempDate))
  } else if (tempCode === '4') { // 上周
    this.dateRange.push(this.formatDate(new Date(year, month, day - week - 6)), this.formatDate(new Date(year, month, day - week)))
  } else if (tempCode === '5') { // 本月
    this.dateRange.push(this.formatDate(new Date(year, month, 1)), this.formatDate(tempDate))
  } else if (tempCode === '6') { // 上月
    this.dateRange.push(this.formatDate(new Date(year, month - 1, 1)), this.formatDate(new Date(year, month, 0)))
  } else if (tempCode === '7') { // 今年
    this.dateRange.push(this.formatDate(new Date(year, 0, 1)), this.formatDate(tempDate))
  } else if (tempCode === '8') { // 去年
    this.dateRange.push(this.formatDate(new Date(year - 1, 0, 1)), this.formatDate(new Date(year - 1, 11, 31)))
  }
},
// 日期范围选择器事件
chooseDateRange() {
  this.chooseIndex = null
},

css代码：

<style lang="scss" scoped>
.cardItem {
  margin-top: 10px;
}
.subTitle {
  color: #1B58F4;
  font-size: 16px;
}
.rowAc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.dateQuickItem {
  padding: 1px 8px;
  margin-right: 16px;
  color: #3C4353;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  border: 1px solid #DCDEE0;
  border-radius: 16px;
  background: #FFFFFF;
  cursor: pointer;
  box-sizing: border-box;
}
.dateQuickItem:hover, .dateQuickItem.active {
  color: #1B58F4;
  border: 1px solid #1B58F4;
}
.dateQuickItem.disabled {
  color: #C8C9CC;
  border: 1px solid #DCDEE0;
  background: #F7F8F9;
  cursor: not-allowed; // 禁止鼠标事件
}
.dataRangePicker {
  width: 240px !important;
  height: 32px !important;
}
</style>
<style lang="scss">
.dataRangePicker.el-date-editor .el-range-separator {
  line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range__icon {
  margin-left: 0px;
  line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range-input {
  width: 95px;
}
</style>

四、获取日期时间的方法

定义两个公共方法：格式化日期时间、格式化为周几

// 格式化日期时间：yyyy-MM-dd hh:mm:ss
  formatDateTime(date) {
  var year = date.getFullYear()
  var month = this.changeNum(date.getMonth() + 1)
  var day = this.changeNum(date.getDate())
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  hour = hour.toString().padStart(2, '0')
  minute = minute.toString().padStart(2, '0')
  second = second.toString().padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
},
// 格式化周几
formatWeek(date) {
  var thisDay =  new Date(date).getDay()
  var weekDay = ['周日','周一','周二', '周三', '周四', '周五', '周六']  
  // 注意getDay()的结果区间为0至6，0表示周日
  return weekDay[thisDay]
},

获取日期时间：

<v-card class="cardItem">
  <v-card-title class="subTitle">
    获取日期时间的方法
  </v-card-title>
  <v-card-text>
    <div class="showChangeItem">获取年：{{new Date().getFullYear()}}</div>
    <div class="showChangeItem">获取月：{{new Date().getMonth() + 1}}</div>
    <div class="showChangeItem">获取日：{{new Date().getDate()}}</div>
    <div class="showChangeItem">获取周几：{{new Date().getDay()}}</div>
    <div class="showChangeItem">获取小时：{{new Date().getHours()}}</div>
    <div class="showChangeItem">获取分：{{new Date().getMinutes()}}</div>
    <div class="showChangeItem">获取秒：{{new Date().getSeconds()}}</div>
    <div class="showChangeItem">获取毫秒：{{new Date().getMilliseconds()}}</div>
    <div class="showChangeItem">获取从零开始的毫秒数：{{new Date().getTime()}}</div>
    <div class="showChangeItem">格式化日期：{{this.formatDate(new Date())}}</div>
    <div class="showChangeItem">格式化日期时间：{{this.formatDateTime(new Date())}}</div>
    <div class="showChangeItem">格式化为周几：{{this.formatWeek(new Date())}}</div>
  </v-card-text>
</v-card>

.showChangeItem {
  width: 350px;
  padding: 5px 12px;
  border-radius: 4px;
  background: #E8F3FF;
}
.showChangeItem + .showChangeItem {
  margin-top: 8px;
}