Vue如何使用Dayjs计算常用日期详解

下面是使用Vue以及Dayjs计算常用日期的攻略详解：

Dayjs是什么？

Dayjs是一个轻量级、没有依赖的JavaScript日期处理库，它具有Moment.js的许多相同的特性，如轻量级、格式化、解析、时间戳、时间段、相对时间等。

如何在 Vue 项目中使用 Dayjs？

1.安装 dayjs

npm install dayjs

2.在 Vue 项目中新建一个日期处理的 js 文件，例如 date.js，在该文件中引入 dayjs，并定义相应的全局日期过滤器：

import Vue from 'vue'
import dayjs from 'dayjs'

Vue.filter('dateFormat', function (value, formatString) {
  return dayjs(value).format(formatString)
})

3.在需要使用的页面中引入该文件：

import './date.js'

4.在代码中使用日期过滤器：

<template>
  <div>
    <p>当前日期：{{ date | dateFormat('YYYY-MM-DD') }}</p>
  </div>
</template>

Dayjs 的常用方法

获取当前时间

dayjs() //获取当前时间

指定日期和时间创建 Dayjs 对象

dayjs('2018-08-08 08:08:08') //指定日期和时间创建 Dayjs 对象

格式化日期

dayjs().format('YYYY-MM-DD HH:mm:ss') //格式化日期

获取或设置日期

dayjs().get('year') //获取年份
dayjs('2018-08-08').set('year', 2019).format('YYYY-MM-DD') //设置年份

计算日期

dayjs().add(1, 'day').format('YYYY-MM-DD') //当前日期加一天
dayjs().subtract(1, 'day').format('YYYY-MM-DD') //当前日期减一天
dayjs('2018-08-08').diff(dayjs('2018-08-09'), 'day') //计算两个日期之间相差的天数

获取日期的开始和结束时间

dayjs().startOf('year') //获取当前年份的开始时间
dayjs().endOf('year') //获取当前年份的结束时间

示例说明

示例1：计算一个订单的截止时间

假设我们要设置一个订单截止时间为下单后三天，我们可以使用 Dayjs 来计算这个截止时间：

import dayjs from 'dayjs'

let createTime = dayjs() //获取当前时间
let deadline = createTime.add(3, 'day') //当前时间加上三天，得到截止时间
console.log(deadline.format('YYYY-MM-DD HH:mm:ss')) //输出截止时间

示例2：计算两个日期之间相差的天数

假设现在是 2021 年 10 月 1 日，我们需要计算离 2021 年圣诞节还有多少天：

import dayjs from 'dayjs'

let christmasDay = dayjs('2021-12-25')
let now = dayjs() //获取当前时间
let days = christmasDay.diff(now, 'day') //计算相差的天数
console.log('距圣诞节还有' + days + '天') //输出距离圣诞节还有多少天

以上就是使用 Vue 以及 Dayjs 计算常用日期的详细攻略，希望能对你有所帮助。