# DateUtil 日期处理
# 基础用法
日期常用方法:dayjs (opens new window)
控制台window.$jpDateUtil可尝试
日期格式化
默认
2025-03-04 14:55:36
yyyy-MM-dd
2025-03-04
yyyy-MM-dd HH:mm
2025-03-04 14:55
yyyy-MM-dd w
2025-03-04 周二
w
周二
yyyy-MM-dd HH:mm:ss w
2025-03-04 14:55:36 周二
<template>
<div>
<div class="title">日期格式化</div>
<div class="content">
<span class="pre">默认</span>
{{ format1 }}
</div>
<div class="content">
<span class="pre">yyyy-MM-dd</span>
{{ format2 }}
</div>
<div class="content">
<span class="pre">yyyy-MM-dd HH:mm</span>
{{ format3 }}
</div>
<div class="content">
<span class="pre">yyyy-MM-dd w</span>
{{ format4 }}
</div>
<div class="content">
<span class="pre">w</span>
{{ format5 }}
</div>
<div class="content">
<span class="pre">yyyy-MM-dd HH:mm:ss w</span>
{{ format6 }}
</div>
</div>
</template>
<script>
export default {
mounted() {},
computed: {
format1() {
return this.$jpDateUtil.format(new Date())
},
format2() {
return this.$jpDateUtil.format(new Date(), 'yyyy-MM-dd')
},
format3() {
return this.$jpDateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
},
format4() {
return this.$jpDateUtil.format(new Date(), 'yyyy-MM-dd w')
},
format5() {
return this.$jpDateUtil.format(new Date(), 'w')
},
format6() {
return this.$jpDateUtil.format(new Date(), 'yyyy-MM-dd HH:mm:ss w')
}
}
}
</script>
<style scoped>
@import url('./common.css');
</style>
显示代码
# 计算
常见日期计算
获取某年某月的天数
31
获取某天是第几周
10
前一天
2025-03-03 14:55:38
前三天
2025-03-01 14:55:38
后一天
2025-03-05 14:55:38
后三天
2025-03-07 14:55:38
2小时前
2025-03-04 12:55:38
2小时后
2025-03-04 16:55:38
2分钟前
2025-03-04 14:53:38
2分钟后
2025-03-04 14:57:38
2个月前
2025-01-04 14:55:38
2个月后
2025-05-04 14:55:38
返回周几
周二
返回2个时间相差的天时分秒
-796,-3,-33,-7(天，时，分，秒)
判断某个日期是否在某个区间(只精确到天)
false
判断某个日期是否在某个区间(精确到时间戳)
false
在什么时间之前,支持比较年月日
true
参考地址
日期是否相等
true
参考地址
<template>
<div>
<div class="content" v-for="item in list" @click="copyToClipboard(item.code)">
<span class="pre">{{ item.name }}</span>
{{ item.fun }}
<a v-if="item.url" :href="item.url" style="float: right;">参考地址</a>
</div>
</div>
</template>
<script>
export default {
mounted() { },
data() {
return {
list: [
{
fun: this.$jpDateUtil.getDayCountOfMonth(2022, 3),
code: "this.$jpDateUtil.getDayCountOfMonth(2022, 3)",
name: '获取某年某月的天数'
},
{
fun: this.$jpDateUtil.getWeekNumber(new Date()),
code: "this.$jpDateUtil.getWeekNumber(new Date())",
name: '获取某天是第几周'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date(), -1)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date(), -1))",
name: '前一天'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date(), -3)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date(), -3))",
name: '前三天'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date())),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date()))",
name: '后一天'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date(), 3)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addDay(new Date(), 3))",
name: '后三天'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addHour(new Date(), -2)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addHour(new Date(), -2))",
name: '2小时前'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addHour(new Date(), 2)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addHour(new Date(), 2))",
name: '2小时后'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addMinute(new Date(), -2)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addMinute(new Date(), -2))",
name: '2分钟前'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addMinute(new Date(), 2)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addMinute(new Date(), 2))",
name: '2分钟后'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addMonth(new Date(), -2)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addMonth(new Date(), -2))",
name: '2个月前'
},
{
fun: this.$jpDateUtil.format(this.$jpDateUtil.addMonth(new Date(), 2)),
code: "this.$jpDateUtil.format(this.$jpDateUtil.addMonth(new Date(), 2))",
name: '2个月后'
},
{
fun: this.$jpDateUtil.getWeekDayByDate(new Date()),
code: "this.$jpDateUtil.getWeekDayByDate(new Date())",
name: '返回周几'
},
{
fun: this.$jpDateUtil.differTime(new Date(), new Date('2022-12-30 12:23:32')) + '(天，时，分，秒)',
code: "this.$jpDateUtil.differTime(new Date(), new Date('2022-12 - 30 12: 23: 32'))",
name: '返回2个时间相差的天时分秒'
},
{
fun: this.$jpDateUtil.compareTime(new Date(), new Date('2022-03-25'), new Date('2022-12-31')),
code: "this.$jpDateUtil.compareTime(new Date(), new Date('2022-03 - 25'), new Date('2022 - 12 - 31'))",
name: '判断某个日期是否在某个区间(只精确到天)'
},
{
fun: this.$jpDateUtil.compareTimeByMilliseconds(new Date(), new Date('2022-03-24 16:12:12'), new Date('2022-12-31 12:12:12')),
code: "this.$jpDateUtil.compareTimeByMilliseconds(new Date(), new Date('2022-03 - 24 16: 12: 12'), new Date('2022-12 - 31 12: 12: 12'))",
name: '判断某个日期是否在某个区间(精确到时间戳)'
},
{
fun: this.$jpDateUtil.before(new Date('2022-03-24 16:12:12'), new Date('2022-12-31 12:12:12')),
code: "this.$jpDateUtil.before(new Date('2022-03 - 24 16: 12: 12'), new Date('2022-12 - 31 12: 12: 12'))",
name: '在什么时间之前,支持比较年月日',
url: 'https://day.js.org/docs/zh-CN/query/is-before'
},
{
fun: this.$jpDateUtil.isSame(new Date('2022-03-24 16:12:12'), new Date('2022-03-24 16:12:12')),
code: "this.$jpDateUtil.isSame(new Date('2022-03-24 16:12:12'), new Date('2022-03-24 16:12:12'))",
name: '日期是否相等',
url: 'https://day.js.org/docs/zh-CN/query/is-same'
},
]
}
},
mounted() {
window.$jpDateUtil = this.$jpDateUtil
},
methods: {
copyToClipboard(text) {
const textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
this.$message.success('拷贝成功');
// alert("Method code copied to clipboard!");
},
},
}
</script>
<style scoped>
@import url('./common.css');
</style>
显示代码