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的