vue项目中获取前后N天日期(dayjs/moment.js/原生js)

7年工作经验，12年开发经验(dddd)。不定时分享

1、dayjs 实现

中文官网

安装&引入

npm install dayjs --save
var dayjs = require('dayjs')
//import dayjs from 'dayjs' // ES 2015

获取今天日期

let td = dayjs().format('YYYY-MM-DD HH:mm:ss')
console.log(td) // 2022-03-03 17:07:11

获取过去/未来N天的日期

// 过去
// let atd = dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss')
let atd = dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
console.log(atd) // 2022-03-02 17:10:32
// 未来
let btd = dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
console.log(btd) // 2022-03-04 17:10:32

另外dayjs 与 moment.js 体验基本一致吧。好用就好。

2、moment.js 实现

中文官网

安装&引入

npm install moment
// import moment from 'moment'
let moment = require('moment');

获取今天日期

let td = moment().format('YYYY-MM-DD')
console.log(td) // 2020-11-10

获取过去/未来N天的日期

// 过去
// let btd = moment().add(-2, 'days').format('YYYY-MM-DD')
let btd = moment().subtract(3, 'days').format('YYYY-MM-DD')
console.log(btd) // 2020-11-07
// 未来
let atd = moment().add(2, 'days').format('YYYY-MM-DD')
console.log(atd) // 2020-11-12

PS：如果是在andv中使用 a-date-picker 注意不要在@change事件中直接修改date，可使用dateString

<a-date-picker @change="onTimeChange" />
methods: 
onTimeChange (date, dateString) {
  // 这里直接使用date会修改日期面板中的时间，可使用moment(dateString) 变相解决

3、原生JS实现

 <script>
    let a = getFMdate(0)
    let b = getFMdate(-1)
    let c = getFMdate(8)
    console.log(a, b, c)
    function getFMdate (number, separator) {
      let n = parseInt(number)
      let nd = new Date()
      let day = nd.getDate()
      let setd = new Date(nd.setDate(day + n))
      let ryear = setd.getFullYear()
      let rmonth = setd.getMonth() + 1
      let rday = setd.getDate()
      let frmonth, frday;
      // month day + '0'
      if (rmonth < 10) {
        frmonth = '0' + rmonth
      } else {
        frmonth = rmonth
      if (rday < 10) {
        frday = '0' + rday
      } else {
        frday = rday