vue3实现时间根据系统时区转换对应的时间

介绍

根据系统时区转换，核心思路是利用 JavaScript 的 Date 对象（天然支持本地时区）处理 UTC 时间与本地时间的转换。后端返回的是 UTC 时间（如带 Z 后缀的 ISO 字符串，如 2026-03-23T08:00:00Z），直接传入 formatLocalTime 即可自动转换为本地时区时间。

安装day.js

javascript 复制代码

npm i dayjs

根据系统转换时区方法

utils/formatTime

javascript 复制代码

import dayjs, { OpUnitType, QUnitType } from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)

// 获取当前时区
export function getTimeZone() {
  let offsetMinutes = new Date().getTimezoneOffset()
  const offsetHours = Math.abs(Math.floor(offsetMinutes / 60)) // 将偏差值转换为小时
  const offsetSign = offsetMinutes < 0 ? '+' : '-' // 根据时区偏差的正负号确定东西半球
  offsetMinutes = Math.abs(offsetMinutes % 60) // 获取分钟偏差

  return (
    offsetSign + offsetHours.toString().padStart(2, '0') + offsetMinutes.toString().padStart(2, '0')
  )
}
/**
 * 时间日期转换
 * @param date 当前时间，new Date() 格式
 * @param format 需要转换的时间格式字符串
 * @param timezone 时区，默认获取当前时区
 * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
 * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
 * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
 * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
 * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
 * @returns 返回拼接后的时间字符串
 */
export function formatDate(date: dayjs.ConfigType, format?: string, timezone?: string): string {
  // 日期不存在，则返回空
  if (!date) {
    return ''
  }
  // 日期存在，则进行格式化
  if (format === undefined) {
    format = 'YYYY-MM-DD HH:mm:ss'
  }
  // 获取当前时区  如：东八区 =>'+0800'
  if (!timezone) {
    timezone = getTimeZone()
  }
  return dayjs.utc(date).utcOffset(timezone).format(format)
}

/**
 * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
 *
 * @param row 行数据
 * @param column 字段
 * @param cellValue 字段值
 */
// @ts-ignore
export const dateFormatter = (row, column, cellValue) => {
  if (!cellValue) {
    return ''
  }
  return formatDate(cellValue)
}

/**
 * element plus 的时间 Formatter 实现，使用指定格式
 *
 * @param row 行数据
 * @param column 字段
 * @param cellValue 字段值
 */
// @ts-ignore
export const dateColFormatter = (row, column, cellValue, format = 'YYYY-MM-DD HH:mm:ss') => {
  if (!cellValue) {
    return ''
  }
  return formatDate(cellValue, format)
}

/**
 * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD 格式
 *
 * @param row 行数据
 * @param column 字段
 * @param cellValue 字段值
 */
// @ts-ignore
export const dateFormatter2 = (row, column, cellValue) => {
  if (!cellValue) {
    return
  }
  return formatDate(cellValue, 'YYYY-MM-DD')
}

页面调用方法

javascript 复制代码

// el-table 表格
<el-table-column label="更新时间" prop="updateTime" :formatter="dateFormatter"   show-overflow-tooltip />
// 其他调用
formatDate(时间)
// 引入时区方法
import { dateFormatter, formatDate } from '@/utils/formatTime'

其它时间方法

获取当前时间

javascript 复制代码

/**
 * 获取当前的日期+时间
 */
export function getNowDateTime() {
  return dayjs()
}

获取当前日期是第几周

javascript 复制代码

/**
 * 获取当前日期是第几周
 * @param dateTime 当前传入的日期值
 * @returns 返回第几周数字值
 */
export function getWeek(dateTime: Date): number {
  const temptTime = new Date(dateTime.getTime())
  // 周几
  const weekday = temptTime.getDay() || 7
  // 周1+5天=周六
  temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
  let firstDay = new Date(temptTime.getFullYear(), 0, 1)
  const dayOfWeek = firstDay.getDay()
  let spendDay = 1
  if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
  firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
  const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
  return Math.ceil(d / 7)
}

将时间转换为 几秒前、几分钟前、几小时前、几天前

javascript 复制代码

/**
 * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
 * @param param 当前时间，new Date() 格式或者字符串时间格式
 * @param format 需要转换的时间格式字符串
 * @description param 10秒：  10 * 1000
 * @description param 1分：   60 * 1000
 * @description param 1小时： 60 * 60 * 1000
 * @description param 24小时：60 * 60 * 24 * 1000
 * @description param 3天：   60 * 60* 24 * 1000 * 3
 * @returns 返回拼接后的时间字符串
 */
export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
  // 传入格式处理、存储转换值
  let t: any, s: number
  // 获取js 时间戳
  let time: number = new Date().getTime()
  // 是否是对象
  typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
  // 当前时间戳 - 传入时间戳
  time = Number.parseInt(`${time - t}`)
  if (time < 10000) {
    // 10秒内
    return '刚刚'
  } else if (time < 60000 && time >= 10000) {
    // 超过10秒少于1分钟内
    s = Math.floor(time / 1000)
    return `${s}秒前`
  } else if (time < 3600000 && time >= 60000) {
    // 超过1分钟少于1小时
    s = Math.floor(time / 60000)
    return `${s}分钟前`
  } else if (time < 86400000 && time >= 3600000) {
    // 超过1小时少于24小时
    s = Math.floor(time / 3600000)
    return `${s}小时前`
  } else if (time < 259200000 && time >= 86400000) {
    // 超过1天少于3天内
    s = Math.floor(time / 86400000)
    return `${s}天前`
  } else {
    // 超过3天
    const date = typeof param === 'string' || 'object' ? new Date(param) : param
    return formatDate(date, format)
  }
}

时间问候语

javascript 复制代码

/**
 * 时间问候语
 * @param param 当前时间，new Date() 格式
 * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
 * @returns 返回拼接后的时间字符串
 */
export function formatAxis(param: Date): string {
  const hour: number = new Date(param).getHours()
  if (hour < 6) return '凌晨好'
  else if (hour < 9) return '早上好'
  else if (hour < 12) return '上午好'
  else if (hour < 14) return '中午好'
  else if (hour < 17) return '下午好'
  else if (hour < 19) return '傍晚好'
  else if (hour < 22) return '晚上好'
  else return '夜里好'
}

将毫秒，转换成时间字符串。例如说，xx 分钟

javascript 复制代码

/**
 * 将毫秒，转换成时间字符串。例如说，xx 分钟
 *
 * @param ms 毫秒
 * @returns {string} 字符串
 */
const locale = {
  cn: {
    seconds: '秒',
    minutes: '分钟',
    hours: '小时',
    days: '天'
  },
  en: {
    seconds: 's',
    minutes: 'm',
    hours: 'h',
    days: 'd'
  }
}
export function formatPast2(ms, lang = 'cn') {
  const langObj = locale[lang]
  const day = Math.floor(ms / (24 * 60 * 60 * 1000))
  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
  if (day > 0) {
    return day + langObj.days + hour + langObj.hours + minute + langObj.minutes
  }
  if (hour > 0) {
    return hour + langObj.hours + minute + langObj.minutes
  }
  if (minute > 0) {
    return minute + langObj.minutes
  }
  if (second > 0) {
    return second + langObj.seconds
  } else {
    return 0 + langObj.seconds
  }
}

设置起始日期，时间为00:00:00

javascript 复制代码

/**
 * 设置起始日期，时间为00:00:00
 * @param param 传入日期
 * @returns 带时间00:00:00的日期
 */
export function beginOfDay(param: Date) {
  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
}

设置结束日期，时间为23:59:59

javascript 复制代码

/**
 * 设置结束日期，时间为23:59:59
 * @param param 传入日期
 * @returns 带时间23:59:59的日期
 */
export function endOfDay(param: Date) {
  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
}

计算两个日期间隔天数

javascript 复制代码

/**
 * 计算两个日期间隔天数
 * @param param1 日期1
 * @param param2 日期2
 */
export function betweenDay(param1: Date, param2: Date) {
  param1 = convertDate(param1)
  param2 = convertDate(param2)
  // 计算差值
  return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
}

日期计算

javascript 复制代码

/**
 * 日期计算
 * @param param1 日期
 * @param param2 添加的时间
 */
export function addTime(param1: Date, param2: number) {
  param1 = convertDate(param1)
  return new Date(param1.getTime() + param2)
}

日期转换

javascript 复制代码

/**
 * 日期转换
 * @param param 日期
 */
export function convertDate(param: Date | string) {
  if (typeof param === 'string') {
    return new Date(param)
  }
  return param
}

指定的两个日期, 是否为同一天

javascript 复制代码

/**
 * 指定的两个日期, 是否为同一天
 * @param a 日期 A
 * @param b 日期 B
 */
export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
  if (!a || !b) return false

  const aa = dayjs(a)
  const bb = dayjs(b)
  return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
}

获取一天的开始时间、截止时间

javascript 复制代码

/**
 * 获取一天的开始时间、截止时间
 * @param date 日期
 * @param days 天数
 */
export function getDayRange(
  date: dayjs.ConfigType,
  days: number
): [dayjs.ConfigType, dayjs.ConfigType] {
  const day = dayjs(date).add(days, 'd')
  return getDateRange(day, day)
}

获取最近7天的开始时间、截止时间

javascript 复制代码

/**
 * 获取最近7天的开始时间、截止时间
 */
export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
  const lastWeekDay = dayjs().subtract(7, 'd')
  const yesterday = dayjs().subtract(1, 'd')
  return getDateRange(lastWeekDay, yesterday)
}

获取最近30天的开始时间、截止时间

javascript 复制代码

/**
 * 获取最近30天的开始时间、截止时间
 */
export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
  const lastMonthDay = dayjs().subtract(30, 'd')
  const yesterday = dayjs().subtract(1, 'd')
  return getDateRange(lastMonthDay, yesterday)
}

获取最近1年的开始时间、截止时间

javascript 复制代码

/**
 * 获取最近1年的开始时间、截止时间
 */
export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
  const lastYearDay = dayjs().subtract(1, 'y')
  const yesterday = dayjs().subtract(1, 'd')
  return getDateRange(lastYearDay, yesterday)
}

获取指定日期的开始时间、截止时间c

javascript 复制代码

/**
 * 获取指定日期的开始时间、截止时间
 * @param beginDate 开始日期
 * @param endDate 截止日期
 */
export function getDateRange(
  beginDate: dayjs.ConfigType,
  endDate: dayjs.ConfigType
): [dayjs.ConfigType, dayjs.ConfigType] {
  return [dayjs(beginDate).startOf('d'), dayjs(endDate).endOf('d')]
}

禁止选择今天之前的日期

javascript 复制代码

/**
 * 禁止选择今天之前的日期
 */
export const disabledBeforeToday = (time: Date) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return time.getTime() < today.getTime()
}

计算两个时间差

javascript 复制代码

/**
 * 计算两个时间差
 * @param startTime 开始时间
 * @param endTime 结束时间
 * @param unit 时差单位
 */
export const timeBetween = (
  startTime: dayjs.ConfigType,
  endTime: dayjs.ConfigType,
  unit?: QUnitType | OpUnitType
) => {
  const start = dayjs(startTime)
  const end = dayjs(endTime)
  return end.diff(start, unit)
}

可视化拖拽数据大屏项目地址

react版本：https://gitee.com/qlsgr/DataReport/

vue版本：https://gitee.com/belief-team/report