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