关于iview组件库的datePicker日期组件的坑

1. formData中包含了时间对象：

formData = { joinEndTime : new Date(1563811200000) } // 其实是 2019-7-23 00.00

2. 使用JSON.parse(JSON.stringify( formData ))复制之后变成了时间字符串

formData = { joinEndTime : "2019-07-22T16:00:00.000Z" } //UTC 时区的 ISO 格式，也是2019-7-23 00.0只不过是格式不同

3. 再使用iview的datePicker组件绑定这个复制之后的值，显示出来的时间错误

<datePicker

type="datetime"

v-model="formData.joinEndTime"

究其原因：

1.使用JSON.parse(JSON.stringify( formData ))复制变成时间字符串的原因？？

因为JSON.stringify触发的就是Date对象的内置toJSON方法，返回 UTC 时区的 ISO 格式日期字符串

比如，JSON.stringify(new Date("2019-07-29 ")) //结果是这种格式 ""2019-07-28T16:00:00.000Z""

2.使用datepicker组件绑定UTC 时区的 ISO 格式日期字符串，识别错误？？

下面是用iviewrun写的demo，可以手动改变datePicker v-mode的time1 / time2来查看区别

这个问题的根本原因还没时间去关注，关于datepicker组件的源码解析后续会更新哒！

解决办法：

1. 使用lodash的cloneDeep( )深拷贝（递归拷贝）

new Date被复制之后依然是时间对象，

下面是lodash的官网：

2. 将UTC格式的时间字符串new Date('')之后转成标准时间格式,不建议

这是我第一次写简书的文章，我甚至没找到代码块的格式在哪里？？？但还是希望大家多多支持啊！如果有人愿意告诉我咋写代码块格式我会很开心哦，么么哒！

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。