[JS] 以 el-date-picker 为例讲解一下 Js Date

最近在写项目中，遇到了要将日期传给后端，然后就在对接接口的时候出现了问题；由于平时也没有怎么研究过js对日期的处理，所以我的代码写的也是迷迷糊糊的，出了bug也是不明所以，所以今天这篇博客就来总结一下js Date的使用

UTC 时间、GMT 时间、本地时间

UTC时间的英文全称：Universal Time Coordinated，中文名称：协调世界时；我们可以通俗的理解为，这个时间是全世界通用的，即全世界都公用的一个时间，是现世界标准时间

GMT时间是格林威治时间，是 0 时区，所有时区都以和GMT之间的偏移量做为参考；可以认为UTC时间就是以GMT0 时区为起点的时间

本地时间指的就是各个时区的不同时间；在一般的项目开发中，我们都是使用的北京的+8本地时间

常用日期格式

使用Date对象之前，首先要了解一下常用的日期格式：

• ISO 8601，它的通用表现形式为YYYY-MM-DDTHH:MM:SS

2021-12-31T23:59:59 // 表示2021年12月31日23时59分59秒

• RFC 3339，是ISO 8601的一个子集

1985-04-12T23:20:50.52Z // 表示 UTC 时间1985年4月12日23时20分50.52秒

• Unix时间戳，他是一个数字类型，表示从 1970年1月1日（UTC/GMT的午夜）开始所经过的秒数

15773570 // timestamp

JS Date 对象

在前后端传输日期时，通常需要用到js Date对象来对日期进行处理

1. new Date()

new Date()返回一个日期字符串，默认是的时区是本地，也就是本地时间；这里要注意的是：

• 如果传入的Date()构造函数的字符串是类似于2024-01-01这样的只有日期的字符串，会被视为UTC时间

• 如果传入的是类似于1970-01-01T12:00Z这样的包含日期和时间的ISO / RFC字符串会被视为UTC时间，因为Z表示UTC时区

• 如果传入的是类似于1970-01-01T12:00这样的包含日期和时间的字符串会被视为本地时间

• 而由于new Date()的返回值是本地时间，所以展示的值可能会有偏差，要注意统一时区

// 本地时间
const date1 = new Date("1970-01-01T12:00") // Thu Jan 01 1970 12:00:00 GMT+0800 (中国标准时间)
​
// UTC 时间
const date2 = new Date("1970-01-01T12:00Z") // Thu Jan 01 1970 20:00:00 GMT+0800 (中国标准时间)
​
// UTC 时间
const date3 = new Date("1970-01-01") // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
date3.toUTCString() // Thu, 01 Jan 1970 00:00:00 GMT (原本就被认为是这样的 UTC 时间)

2. date.toUTCString()

返回一个以UTC时区为准的字符串，要注意时区统一

3. date.toISOString()

返回一个ISO格式的字符串，并且总是为UTC时区，要注意时区统一

4. 结合实际场景分析

我们使用element-plus的el-date-picker来演示分析一下js Date的使用，这里有两个需要注意的点：

• el-date-picker的foramt属性是用来格式化展示的日期的，可认为是label

• el-date-picker的value-foramt属性是用来格式化具体的v-model的值的，可认为是实际的value

<script setup lang="ts">
import { ref, watch } from "vue"
​
const pickedDate = ref<string>("")
​
watch(pickedDate, () => {
  console.log("修改选择日期的值：", pickedDate.value)

  const localDate = new Date(pickedDate.value).toLocaleDateString()
  console.log("localeDate：", localDate)
​
  const ISODate = new Date(localDate).toISOString()
  console.log("ISO：", ISODate)
​
  const ISOToLocaleDate = new Date(ISODate).toLocaleDateString()
  console.log("ISO to LocaleDate：", ISOToLocaleDate)
})
</script>
​
<template>
  <div class="container">
    <el-date-picker
      v-model="pickedDate"
      type="date"
      placeholder="请选择日期"
    />
  </div>
</template>
​
<style lang="scss">
​
</style>