前端超实用时间处理方法，让时间更优雅

一、基于dayjs的日期格式化方法

时间戳转日期字符串

/**
 * 基于dayjs的日期格式化,时间戳(毫秒)转日期
 * @param {number} date - 时间戳
 * @param {string} format - 格式化模式，默认'YYYY-MM-DD HH:mm'
 * @returns {string} 格式化后的日期字符串
 */
dateFormat(date, format = 'YYYY-MM-DD HH:mm') {
  if (!date) return '--'
  return dayjs(date).format(format)
}

日期转时间戳

/**
 * 基于dayjs的日期格式化,日期转时间戳(毫秒)
 * @param {string|Date} val - 日期值
 * @returns {number} 时间戳
 */
timestamp(val) {
  return dayjs(val).valueOf()
}

表格数据格式化系列方法

// 年月日时分格式化
tableDateFormat(row, column, cellValue) {
  if (!cellValue) return '--'
  return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
}

// 仅年月日格式化
tableDateYmdFormat(row, column, cellValue) {
  if (!cellValue) return '--'
  return dayjs(cellValue).format('YYYY-MM-DD')
}

// 仅时分秒格式化
tableDateHmFormat(row, column, cellValue) {
  if (!cellValue) return '--'
  return dayjs(cellValue).format('HH:mm:ss')
}

二、智能时间展示方法

1. 相对时间展示

/**
 * 将时间转换为"刚刚"、"x分钟前"等易读格式
 * @param {number} dateTimeStamp - 时间戳
 * @returns {string} 相对时间字符串
 */
toDateText(dateTimeStamp) {
  if (!dateTimeStamp) return ''
  let result = ''
  let minute = 1000 * 60
  let hour = minute * 60
  let day = hour * 24
  let week = day * 7
  let month = day * 30
  let now = new Date().getTime()
  let diffValue = now - dateTimeStamp
  
  if (diffValue < 0) return '刚刚'
  
  let monthC = diffValue / month
  let weekC = diffValue / week
  let dayC = diffValue / day
  let hourC = diffValue / hour
  let minC = diffValue / minute
  
  if (monthC >= 1 && monthC <= 3) {
    result = parseInt(monthC) + '月前'
  } else if (weekC >= 1 && weekC <= 3) {
    result = parseInt(weekC) + '周前'
  } else if (dayC >= 1 && dayC <= 6) {
    result = parseInt(dayC) + '天前'
  } else if (hourC >= 1 && hourC <= 23) {
    result = parseInt(hourC) + '小时前'
  } else if (minC >= 1 && minC <= 59) {
    result = parseInt(minC) + '分钟前'
  } else if (diffValue >= 0 && diffValue <= minute) {
    result = '刚刚'
  } else {
    // 超过3个月显示完整日期
    let datetime = new Date(dateTimeStamp)
    let year = datetime.getFullYear()
    let month = (datetime.getMonth() + 1).toString().padStart(2, '0')
    let date = datetime.getDate().toString().padStart(2, '0')
    result = `${year}-${month}-${date}`
  }
  return result
}

简洁时间展示

/**
 * 智能时间展示，今年内显示月日，往年显示完整日期
 * @param {number} dateTimeStamp - 时间戳
 * @returns {string} 格式化后的日期字符串
 */
toDateValue(dateTimeStamp) {
  if (!dateTimeStamp) return ''
  let datetime = new Date(dateTimeStamp)
  let nowYear = new Date().getFullYear()
  let year = datetime.getFullYear()
  let month = (datetime.getMonth() + 1).toString().padStart(2, '0')
  let date = datetime.getDate().toString().padStart(2, '0')
  let hour = datetime.getHours().toString().padStart(2, '0')
  let minute = datetime.getMinutes().toString().padStart(2, '0')
  
  // 当年显示 MM-DD HH:mm
  if (year == nowYear) {
    return `${month}-${date} ${hour}:${minute}`
  }
  // 往年显示 YYYY-MM-DD HH:mm
  return `${year}-${month}-${date} ${hour}:${minute}`
}

三、通用时间处理方法

• 时间戳转时分秒

/**
 * 将秒数转换为时分秒格式
 * @param {number} time - 秒数
 * @returns {string} 格式化后的时分秒
 */
shiftTimeStamp(time) {
  let hour = parseInt(time / 3600)
  let min = parseInt((time - hour * 3600) / 60)
  let sec = time - (hour * 3600) - (min * 60)
  
  // 格式化补零
  const f_m_dispose = (min, sec) => {
    if (min < 10 && sec < 10) return `0${min}:0${sec}`
    if (min < 10 && sec >= 10) return `0${min}:${sec}`
    if (min >= 10 && sec < 10) return `${min}:0${sec}`
    return `${min}:${sec}`
  }
  
  if (!hour) {
    return f_m_dispose(min, sec)
  } else {
    if (!min) {
      return sec < 10 ? `${hour}:00:0${sec}` : `${hour}:00:${sec}`
    } else {
      return `${hour}:${f_m_dispose(min, sec)}`
    }
  }
}

获取指定日期

/**
 * 获取指定间隔的日期
 * @param {string} format - 日期格式
 * @param {string} strInterval - 间隔类型(s:秒,n:分,h:时,d:天,w:周,m:月,y:年)
 * @param {number} number - 间隔数量
 * @returns {string} 格式化后的日期
 */
getDate(format, strInterval, number) {
  let myDate = new Date()
  let dtTmp = new Date()
  
  switch (strInterval) {
    case 's': myDate = new Date(Date.parse(dtTmp) + (1000 * number)); break
    case 'n': myDate = new Date(Date.parse(dtTmp) + (60000 * number)); break
    case 'h': myDate = new Date(Date.parse(dtTmp) + (3600000 * number)); break
    case 'd': myDate = new Date(Date.parse(dtTmp) + (86400000 * number)); break
    case 'w': myDate = new Date(Date.parse(dtTmp) + ((86400000 * 7) * number)); break
    case 'm': myDate = new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + number, dtTmp.getDate()); break
    case 'y': myDate = new Date((dtTmp.getFullYear() + number), dtTmp.getMonth(), dtTmp.getDate()); break
  }
  
  return toDate(myDate, format)
}

四、特色功能

• 获取今天往前90天的时间戳

/**
 * 获取90天前的时间戳
 * @returns {number} 时间戳
 */
getTime(type) {
  if (type === 'start') {
    return new Date().getTime() - 3600 * 1000 * 24 * 90
  } else {
    return new Date(new Date().toDateString())
  }
}

日期标准化

/**
 * 标准化日期格式(YYYY-MM-DD 00:00:00)
 * @param {Date} date - 日期对象
 * @returns {string} 标准化后的日期字符串
 */
timeFormat(date) {
  if (!date) return
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day} 00:00:00`
}