重新学习一下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的

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

相关文章
|
存储 安全 BI
图文详解丨iOS App上架全流程及审核避坑指南
图文详解丨iOS App上架全流程及审核避坑指南
4919 0
图文详解丨iOS App上架全流程及审核避坑指南
|
8月前
|
人工智能 API 数据库
Cognita:小白也能搭建 RAG 系统,提供交互界面的开源模块化 RAG 框架,支持多种文档检索技术
Cognita 是一个面向生产环境的开源模块化 RAG 框架,支持本地部署、无代码 UI 和增量索引,帮助开发者轻松构建和扩展生产级应用。
449 11
Cognita:小白也能搭建 RAG 系统,提供交互界面的开源模块化 RAG 框架,支持多种文档检索技术
|
自然语言处理 JavaScript 前端开发
vue2 div滚动条下拉到底部时触发事件(懒加载) 超级简易版本的懒加载
【6月更文挑战第4天】导文 vue2 div滚动条下拉到底部时触发事件(懒加载) 超级简易版本的懒加载 文章重点 内容效果展示: 当div拉到底部的时候: 在这里插入图片描述 编辑器返回: 在这里插入图片描述 代码展示 在Vue 2中,可以通过监听div的scroll事件来判断滚动条是否到达了底部。以下是一个简单的示例:
386 2
|
SQL 存储 分布式计算
MaxCompute 入门:大数据处理的第一步
【8月更文第31天】在当今数字化转型的时代,企业和组织每天都在产生大量的数据。有效地管理和分析这些数据变得至关重要。阿里云的 MaxCompute(原名 ODPS)是一个用于处理海量数据的大规模分布式计算服务。它提供了强大的存储能力以及丰富的数据处理功能,让开发者能够快速构建数据仓库、实时报表系统、数据挖掘等应用。本文将介绍 MaxCompute 的基本概念、架构,并演示如何开始使用这一大数据处理平台。
1675 0
|
Java Android开发
添加Flutter模块到已有项目(Android)
添加Flutter模块到已有项目(Android)
136 3
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
13814 2
使用 JavaScript 获取 URL 参数的详细指南
|
存储 机器学习/深度学习 数据挖掘
ArcGIS中ArcMap栅格遥感影像的监督分类
ArcGIS中ArcMap栅格遥感影像的监督分类
341 1
|
编译器 C++
【C++】模板进阶 -- 详解
【C++】模板进阶 -- 详解
|
数据挖掘 UED 开发者
内测邀请|宜搭应用搭建体验全新升级,邀您抢先体验!
宜搭应用搭建体验全新升级,现正式开放内测申请,邀请大家来尝鲜哦~
443 0
内测邀请|宜搭应用搭建体验全新升级,邀您抢先体验!
|
JavaScript Linux 数据安全/隐私保护
使用Appuploader工具将IPA上传到App Store的最新流程和步骤
苹果官方提供的工具xcode上架ipa非常复杂麻烦。用appuploader 可以在 mac 和windows 上制作管理 证书 ,无需钥匙串工具