一、计算距离今天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 * 1000nowDate.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 - nowTimethis.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"><divv-for="(item, index) in dateQuickSelection":key="index"class="rowAc dateQuickItem":class="{ active: chooseIndex === index, disabled: !dateQuickSwitch }"@click="chooseDateQuick(index)">{{ item.name }}</div><el-date-pickerv-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-switchv-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 = indexvar tempCode = this.dateQuickSelection.find(ele => this.chooseIndex === Number(ele.code) - 1).codevar 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:ssformatDateTime(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;
}
