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

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

·

1 min read

最近在写项目中,遇到了要将日期传给后端,然后就在对接接口的时候出现了问题;由于平时也没有怎么研究过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-plusel-date-picker来演示分析一下js Date的使用,这里有两个需要注意的点:

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

  • el-date-pickervalue-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>