今天使用XCUI开发过程中发现另一个诡异的问题,就是年月日初始化之后默认时分秒的问题。

问题发生在重构交互日志页面的时候,原来的老页面是这样的:

进入了交互日志页面之后,默认会初始化时间为今天的凌晨到当前时间,然后下面的日志列表会自动的加载今天的日志信息。

重构过程中我用了XCUI组件的DateTimePicker 时间日期选择器,这个XCUI是咱们外卖自己写的组件,功能很全面,用起来也很方便,但是时间日期选择器出于人性化考虑,在页面中展示的日子格式是“yy-mm-dd hh:mm:ss”的格式方面用户更直观的看到具体时间。但是实际选择了日期控件之后得到的时间数据的字符串格式是这样的:Wed Sep 13 2017 00:00:00 GMT+0800 (中国标准时间),Sat Sep 23 2017 00:00:00 GMT+0800 (中国标准时间)。我看了一下后台ajax数据接口,请求日期的格式要求是yy-mm-dd hh:mm:ss这样的,于是写了个日期格式转换的公共函数用来转换格式。

结果测试过程中发现了一个诡异的问题,原本想要的开始时间应该是00:00:00,但是实际得到的日期默认变成了变成了08:00:00,百思不得其解,从来没有碰到过这种情况。

于是逐步排查问题所在,结果发现初始化时间的时候是没问题的

let startTime = new Date(endTime.getFullYear(),endTime.getMonth(),endTime.getDate());

得到的结果也是正确的时间

Thu Sep 07 2017 00:00:00 GMT+0800 (中国标准时间)

所以这个莫名其妙的八点来自于之后的数据转换或者插件本身的问题。开始找原因

//初始化时间和账号
let me = this;
let endTime = new Date();
let startTime = new Date(endTime.getFullYear(),endTime.getMonth(),endTime.getDate());
console.log(startTime);
console.log(endTime);
let initStartTime = formatDate(startTime);
let initEndTime = formatDate(endTime,true);
console.log(initStartTime);
console.log(initEndTime);
me.dateTimeRange = [startTime,endTime]; //dateTimeRange是控制插件显示时间的字段值
me.dateRange.startTime = initStartTime; //dateRange是需要传送给后台的字段值
me.dateRange.endTime = initEndTime;

从控制台打印出来突然发现时间格式不一致,initStartTime的格式已经变成了2017-09-07,再作为参数传入Date()初始化会变成8:00。

感觉这块很神奇,于是自己把日期格式化的东西都试了一下。

let startTime = new Date(2017,8,7,0,0,0);  //年月日时分秒
let startTime = new Date("month dd,yyyy hh:mm:ss");  //传入的是字符串,注意空格和逗号冒号
let startTime = new Date(ms);   //参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数
let startTime = new Date("2017-09-08 00:00:00");  //出问题的就是这个方法

前面三种的日期格式化都没什么问题,即使不传后面的时分秒参数也能取到默认的当天00:00:00的时间,但是第四个就变成了默认的08:00:00了。

当前的日期标准有三个,toGMTString()、toISOString()和toUTCString()。

  1. toGMTString()这个方法在js中已经已经废除了,现在使用这个方法会返回toUTCString()的返回值,toUTCString()方法根据世界时 (UTC) 把 Date 对象转换为字符串,并返回结果。

toUTCString()返回的结果格式为:"Fri Sep 08 2017 10:24:21 GMT+0800 (中国标准时间)"。

      2. toISOString()是一个比较直观的方法,可以使用ISO标准将 Date 对象转换为字符串,并返回结果。

toISOString()返回的格式是: "2017-09-08T03:00:57.951Z" 中间有字符串T链接日期和时间,后面是标准。