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

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

## **UTC 时间、GMT 时间、本地时间**

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

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

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

## **常用日期格式**

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

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

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

* `RFC 3339`，是`ISO 8601`的一个子集
    

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

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

```javascript
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()`的返回值是本地时间，所以展示的值可能会有偏差，要注意统一时区
    

```javascript
// 本地时间
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`
    

```javascript
<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>
```