重新学习一下new Date()

简介: 重新学习一下new Date()

new Date()你知道多少

很多小伙伴可能都知道, 
Date是js中的一个内置对象,用于处理日期和时间。
当你调用 new Date() 时,它会创建一个新的日期(Date) 对象。
表示当前本地日期和时间。
那么你知道  new Date() 可以接收几种形式的参数吗?
它的默认返回是什么日期格式?
new Date()可以接收4种形式的参数。

常见的日期格式有几种?

我们经常看见 Wed Aug 16 2023 08:00:00 GMT+0800 (中国标准时间)
这样的时间格式,你知道有几种常见的日期格式吗?
上面这一种又是属于那一种呢?
好了,不卖关子,常见的日期格式有如下这几种:
1.中国标准时间 如:Wed Aug 16 2023 08:00:00 GMT+0800 (中国标准时间)
2.时间戳 1692144000000 单位是毫秒 13位数; 10位数的单位是秒 
  new Date().getTime()返回的就是时间戳  13位数
  今天后端说,他想要一个10位数的时间戳,给我整懵了。
  在我的印象中时间戳不一是13位数的吗?原来是秒的时间戳
3.UTC格式(国际统一时间) 2023-08-16T16:00:00.000Z

new Date()可以接收4种形式的参数

1.不传递参数:如果没有传递任何参数,创建一个表示当前日期和时间的 Date 对象。
2.传递一个正确的日期字符串。 如:
3.传递一个时间戳 毫秒
4.传递 年、月、日、时、分、秒、毫秒的参数
5.传递一个表示时区偏移量的字符

第1种:不传递参数,创建当前当前日期和时间

<script>
  let currentDate = new Date();  
  console.log(currentDate);
  // 表示:当前的日期和时间
  // 输出的是:Wed Aug 16 2023 11:00:34 GMT+0800 (中国标准时间)
</script>

第2种: 传递一个正确的日期字符串

我们可以传递一个正确的日期字符串。
这个字符串是可以被我们的js解析为日期的。
如:"2023-08-16", "2023/08/16",
<script>
  let dateStr = "2023-08-16";  
  let date = new Date(dateStr);  
  console.log(date);
  // 输出:Wed Aug 16 2023 08:00:00 GMT+0800 (中国标准时间)
</script>

第3种:传递一个时间戳 毫秒

<script>
  let timestamp = 1692144000000; // 时间戳  毫秒
  let date = new Date(timestamp);  
  console.log(date); //Wed Aug 16 2023 08:00:00 GMT+0800 (中国标准时间)
</script>

第4种:传递 年、月、日、时、分、秒、毫秒

<script>
  let date = new Date(2023, 7, 16, 14, 30, 45, 417); // 2023年8月16日14时30分45秒417毫秒  
  console.log(date); // 输出:Wed Aug 16 2023 14:30:45 GMT+0800 (中国标准时间)
</script>
我们传递的参数可以是数字或字符串,并且可以有省略。
省略的部分会被设置为对应的最小值或默认值。
如,只提供年份和月份 new Date('2023', 7);  会被解析为 "2023年8月1日 00:00:00"。日期天数解析为1号
如,只提供年份和月份和天  new Date('2023', 7, 16);  会被解析为 "2023年8月16日 00:00:00"。
如,只提供年份和月份和天和小时  new Date('2023', 7, 16, 14);  会被解析为 "2023年8月16日 14:00:00"。

第5种: 传递1个表示时区偏移量的字符

<script>
  let date = new Date("Tue Jun 21 2023 14:40:15 UTC+8");  // 一个表示时区偏移量的字符串
  console.log(date); // 输出:Wed Jun 21 2023 14:40:15 GMT+0800 (中国标准时间)
</script>
ps:这个字符串应该是1个表示时区偏移量的字符串,格式为 "UTC+数字"。
其中数字表示与UTC时间的偏移量(单位为小时)。
例如,"UTC+8" 表示东八区。如果传递了这个参数,那么会创建一个表示特定时区的日期和时间。

我们的发现

我们发现 new Date()的日期格式返回,都是中国标准时间。

如何判断是否是时间对象呢?

我们为什么需要判断是否是时间对象呢?
因为:只有是时间对象才能调用 getTime(),getYear()....等方法
第一种:Object.prototype.toString.call(value) === '[object Date]'
如果返回的是true,说明是时间对象
第二种:时间值.constructor 如:
let date = new Date(); 
console.log(  date.constructor); // ƒ Date() { [native code] }

选择的时间必须大于当前时间

很多时候,我们创建的表单需要进行验证:
1.用户如果选择了时间,时间必须要大于当前时间。
  如果不选择时间,则不进行校验。
  我们通过时间戳进行比较
我们在下面这个小例子中去看下怎么做?
我们需要做的是:
<template>
  <div>
    <h2>时间限制</h2>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="名称" style="width:500px">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item :rules="{validator:limitTime}" prop="time"  label="时间段">
        <el-date-picker
          v-model="ruleForm.time"
          type="datetimerange"
          :picker-options="pickerOptions"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary" @click="onSubmit('ruleForm')">立即创建</el-button>
    </el-form>
  </div>
</template>
<script>
export default {
  data(){
    return{
      // 时间选中只能大于当前日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      ruleForm:{
        name:'',
        time:''
      }
    }
  },
  methods: {
    limitTime(rule,value,callback) {
      // 如果有时间进行验证,没有时间选择时间不进行验证
      if(value &&value.length>1){
        // 通过new Date返回13位数的时间戳
        let nowTime = new Date().getTime()
        // value[0] 是一个时间对象,时间对象可以调用 getTime 返回时间戳
        let endTime = value[0].getTime()
        if(nowTime>endTime){
          callback('开始时间不能小于当前时间')
        }else{
          callback()
        }
      }else {
        callback()
      }
    },
    onSubmit(ruleForm){
      this.$refs[ruleForm].validate((valid) => {
        console.log('valid', valid);
          if (valid) {
            alert('验证通过!');
          } else {
            alert('验证失败!');
            return false;
          }
        });
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
有些小伙伴可能会说:这种限制会不会有问题。
刚开始选择的时间是大于当前时间,
但是用户点击确认的时候最初选择的时间小于了当期时间
其实是不会的,因为点击的时候还会验证一次。
因此,没有问题的。

特别重要:ios和安卓的时间日期格式兼容问题

时间格式在ios和android上有所不同。
在ios端,需要将格式 yyyy-mm-dd 进行转换为 yyyy/mm/dd
//格式为yyyy-mm-dd 【尽量不要使用这样的格式,有兼容性问题】
let time = 2021-12-22
//android可以正常使用,ios会出现NaN
new Date(time)
//ios需要转换为2021/12/22,同时安卓也支持
new Date(time.replace(/-/g,'/'))
然后就我们通过getTime()获取时间戳进行计算
ps:中国标准时间 如:Wed Aug 16 2023 08:00:00 GMT+0800 (中国标准时间) 在ios和 android 是上OK的

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
2月前
|
算法 调度 数据库
【C++20 新特性 Calendar (C++20) − Time zone (C++20)】时间的艺术与科学: C++中的现代日期和时区处理
【C++20 新特性 Calendar (C++20) − Time zone (C++20)】时间的艺术与科学: C++中的现代日期和时区处理
84 3
|
7月前
|
存储 C语言 C++
软件开发入门教程网之C++ 日期 & 时间
软件开发入门教程网之C++ 日期 & 时间
|
10月前
|
存储 SQL 安全
【JavaSE专栏41】Java常用类 Date 解析,高效处理日期问题
【JavaSE专栏41】Java常用类 Date 解析,高效处理日期问题
|
10月前
|
消息中间件 Dubbo NoSQL
老板,JDK8的日期、时间函数我不熟悉?
介绍JDK 8中的新日期工具类,及整理成PDF文档
53 0
|
10月前
|
存储 安全 架构师
Java开发篇 - 还在为计算2个日期间隔的天数纠结?是时候换掉java.util.Date
即然Date及Calendar在计算时间间隔或者其他场景下都比较麻烦,那么有没有更好的API使用呢?当然是有的,JDK1.8中,就更新了新的日期/时间处理工具类。具体的包在java.time目录下,有兴趣的小伙伴可以打开进行查看。
273 0
|
12月前
|
C++ Python
刷题笔记|计算两个年份间某一日期是周末的天数,发现ctime库对象有时间范围(C++|Python )
刷题笔记|计算两个年份间某一日期是周末的天数,发现ctime库对象有时间范围(C++|Python )
222 0
|
测试技术 Python
软件测试|教你如何用Python获取昨天今天明天的日期
软件测试|教你如何用Python获取昨天今天明天的日期
196 0
软件测试|教你如何用Python获取昨天今天明天的日期
|
存储 算法 Unix
C++ 日期和时间编程总结
在 C++11 之前,C++ 编程只能使用 C-style 日期时间库,其精度只有秒级别,这对于有高精度要求的程序来说,是不够的。但这个问题在C++11 中得到了解决,C++11 中不仅扩展了对于精度的要求,也为不同系统的时间要求提供了支持。另一方面,对于只能使用 C-style 日期时间库的程序来说,C++17 中也增加了 timespec 将精度提升到了纳秒级别。
314 1
|
Python
Python编程:calendar日历模块入门
Python编程:calendar日历模块入门
129 0
|
运维 前端开发 Java
全网最全!彻底弄透Java处理GMT/UTC日期时间(上)
全网最全!彻底弄透Java处理GMT/UTC日期时间(上)
全网最全!彻底弄透Java处理GMT/UTC日期时间(上)