在前端使用vue开发时,有时需要计算一些日期时间,如:

  • 计算周月截止日期
  • 计算XX天前/后的日期
  • 将时间戳转换为日期(YYYY-MM-DD)
  • 计算月天数
  • 日期转时间戳

原生js实现可以用Date(日期)对象,可以参考:JavaScript Date(日期) 对象

推荐一个轻量的处理时间和日期的 JavaScript 库:dayjs

使用这个插件计算常用日期十分方便

  1. 在项目中安装dayjs,命令为:npm install dayjs --save
  2. 在main.js中,添加如下2句代码
import dayjs from 'dayjs';
Vue.prototype.dayjs = dayjs;

3、在页面需要使用的地方,直接使用

常用API总结

  1. 获取当前年度
dayjs().format("YYYY")  
// '2022'
  1. 获取今年第一天
dayjs().format("YYYY") + "-01-01" 
// '2022-01-01'

dayjs().startOf('year').format('YYYY-MM-DD')
// '2022-01-01'
  1. 获取当天
dayjs().format("YYYY-MM-DD")
// '2022-01-01'
  1. 获取当月
dayjs().startOf('month').format('YYYY-MM')
// '2022-07'
  1. 获取当月第一天
dayjs().startOf('month').format('YYYY-MM-DD')
// '2022-07-01'
  1. 获取本周第一天(周一)
dayjs().subtract(dayjs().day() ? dayjs().day() - 1 : 6, "day").format("YYYY-MM-DD");
// '2022-07-25'
  1. 获取本周第一天(周日)
dayjs().startOf('week').format('YYYY-MM-DD')
// '2022-07-24'
  1. 获取当前时间点
// 时
dayjs().startOf('hour').format('HH') // '11'
// 分
dayjs().startOf('minute').format('HH:mm') // '11:38'
// 秒
dayjs().startOf('second').format('HH:mm:ss') // '11:39:09'
// 当前时间点(精确到秒)
dayjs().endOf().format('YYYY-MM-DD HH:mm:ss') //  '2022-07-28 14:15:13'
  1. 从今天往后计算 的 第N天
let n = 7;
dayjs().add(n, 'day').format('YYYY-MM-DD')
// 2022-08-04
  1. 获取N年前的今天
let n = 1;
dayjs().subtract(n, 'year').format('YYYY-MM-DD')
// 2021-07-28
  1. 获取N天前
let n = 3;
dayjs().subtract(n, 'day').format('YYYY-MM-DD');
// 2022-07-25
  1. 获取本月(或指定月份)天数
// 获取本月天数
dayjs().daysInMonth() // 31

// 获取指定月份天数
dayjs('2022-06').daysInMonth() // 30
  1. 计算两个指定日期之间的(年,月,天,小时,分,秒)
// 相差: 年 参数--year
dayjs('2022-02-01').diff('2012-01-01','year') // 10

// 相差: 月 参数--month
dayjs('2022-02-01').diff('2012-01-01','month') // 121

// 相差: 天 参数--day 
dayjs('2022-02-01').diff('2012-01-01','day') // 3684

// 相差:时 参数--hour
dayjs('2022-02-01').diff('2012-01-01','hour') // 88416

// 相差:分 参数--minute
dayjs('2022-02-01').diff('2012-01-01','minute') // 5304960

// 相差: 秒 参数--second
dayjs('2022-02-01').diff('2012-01-01','second') // 318297600

Logo

前往低代码交流专区

更多推荐