根据VUE+Element+Datetimepicker的取值计算毫秒值，并适配firefox,safari

缘起

使用VUE+Element组件中的Datetimepicker控件选择一个日期，
在这个日期的基础上增加7天后得到一个新的日期;

思路

这个计算需要获取控件选取日期的毫秒值，
然后在这个毫秒值的基础上增加7天时间的总毫秒数;

遇到的问题

js中根据dateTime计算毫秒数要使用Date(dateTime).getTime()方法，dateTime的格式通常为“yyyy-MM-dd hh:mm:ss”，这个格式在firefox和safari浏览器中计算毫秒数时会遇到问题，因为这两个浏览器中要求dateTime的格式为“yyyy/MM/dd hh:mm:ss”;
例如：

let timeStampTmp1 = new Date('2020-05-18 18:12:23').getTime();
console.log('timeStampTmp1:' + timeStampTmp1);

在safari中会报错：

[Log] timeStampTmp1:NaN (16.4751cd74e044c4bcc6b3.hot-update.js, line 957)

在safari中需要这样来定义datetime的格式：

let timeStampTmp2 = new Date('2020/05/18 18:12:23').getTime();
console.log('timeStampTmp2:' + timeStampTmp2);

[Log] timeStampTmp2:1589796743000 (16.4751cd74e044c4bcc6b3.hot-update.js, line 960)

解决方案

因此，为了适配不同的浏览器，我们需要新的方法来计算毫秒数；
这个新的方法就是引入一个第三方的日期处理类库moment.js；
引入的方法见官方网站：http://momentjs.cn/

WeChat7cb0c0f5a37a8af83176d5eb5c6bbb52.png

moment中有一个方法用来解决这个问题：

var time = moment(‘2015-11-7 22:17:47′,’YYYY-MM-DD HH:mm:ss’).valueOf();
//time:1607485474000

Show Me The Code

首先，在使用el-date-picker控件时，我们要先与server端同学约定好日期的传值格式，通常为：“yyyy-MM-dd hh:mm:ss”

先上一段控件的代码：

<el-date-picker
  v-model="drawFrontFrom.openPrizeDate"
  type="datetime"
  format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd HH:mm:ss"
  placeholder="选择日期时间" @change="prizeDateChange($event)">
</el-date-picker>

注意，控件中设置了：format和value-format两个属性，这两个属性很重要；

然后就可以在prizeDateChange()方法中进行处理了

            prizeDateChange(date) {
                //展示时间默认增加七天
                if (!date) {
                    this.drawFrontFrom.showResultEndDate = '';
                }
               console.log("datetime:"+ date);
               var time = moment(date,'YYYY-MM-DD HH:mm:ss').valueOf();
               console.log("time:"+time);
               let endTime = time + 604800000;
               this.drawFrontFrom.showResultEndDate = this.$helper.fromatDate(endTime);
               console.log("this.drawFrontFrom.showResultEndDate:"+this.drawFrontFrom.showResultEndDate);
            },

以上代码最后可在safari浏览器中正常输出正确的结果：

[Log] this.drawFrontFrom.showResultEndDate:2020-12-16 11:44:34 (16.4751cd74e044c4bcc6b3.hot-update.js, line 968)