dayjs处理时区问题、前端时区问题

1、dayjs如何支持时区

复制代码

<!-- 引入dayjs核心文件：提供时间解析、格式化、加减等基础功能（必选） -->
<script src="./dayjs/dayjs.js"></script>
<!-- 引入utc插件：扩展UTC时间处理能力，支持本地时间与UTC时间互转 -->
<script src="./dayjs/utc.js"></script>
<!-- 引入timezone插件：基于UTC插件，支持IANA时区（如Asia/Shanghai）的跨时区转换 -->
<script src="./dayjs/timezone.js"></script>
<!-- 引入relative插件：扩展相对时间功能，如"1小时前""2天后"等人性化展示 -->
<script src="./dayjs/relative.js"></script>

项目存储时可以和后端约定以上海时间为基准存储，显示时，默认以上海时间显示，用户可在偏好设置里面修改时区

复制代码

dayjs.extend(dayjs_plugin_utc);
dayjs.extend(dayjs_plugin_timezone);
dayjs.extend(dayjs_plugin_relativeTime);

const utcTimestamp = dayjs().tz('Asia/Shanghai').valueOf();

console.log('时间', utcTimestamp, dayjs(utcTimestamp).unix())

2、全球统一时间

注意：默认获取的时间戳就是utc时间，全球统一，只是在格式化成各地区时间后会自动实现换算

复制代码

console.log('utc时间', dayjs.utc().format('YYYY-MM-DD hh:mm:ss'))  
// 或者  
console.log('utc时间', dayjs().tz('UTC').format('YYYY-MM-DD hh:mm:ss'))

复制代码

// 全球时间的统一基准
const utctime = dayjs.utc().unix()

console.log('UTC时间：', dayjs.utc(utctime * 1000).format('YYYY-MM-DD HH:mm:ss'))
// 上面一定要使用utc方法，否则dayjs默认会按本地时区解析
console.log('上海时间：', dayjs(utctime * 1000).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss'))
console.log('东京时间：', dayjs(utctime * 1000).tz('Asia/Tokyo').format('YYYY-MM-DD HH:mm:ss'))
console.log('悉尼时间：', dayjs(utctime * 1000).tz('Australia/Sydney').format('YYYY-MM-DD HH:mm:ss'))

3、全球各洲及时区

复制代码

[
  {
    "label": "",
    "value": ""
  },
  {
    "label": "非洲",
    "value": "Africa"
  },
  {
    "label": "美国",
    "value": "America"
  },
  {
    "label": "南极洲",
    "value": "Antarctica"
  },
  {
    "label": "北极",
    "value": "Arctic"
  },
  {
    "label": "亚洲",
    "value": "Asia"
  },
  {
    "label": "大西洋",
    "value": "Atlantic"
  },
  {
    "label": "澳大利亚",
    "value": "Australia"
  },
  {
    "label": "巴西",
    "value": "Brazil"
  },
  {
    "label": "加拿大",
    "value": "Canada"
  },
  {
    "label": "智利",
    "value": "Chile"
  },
  {
    "label": "欧洲",
    "value": "Europe"
  },
  {
    "label": "印度",
    "value": "Indian"
  },
  {
    "label": "墨西哥",
    "value": "Mexico"
  },
  {
    "label": "太平洋",
    "value": "Pacific"
  },
  {
    "label": "US",
    "value": "US"
  }
]