今天使用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链接日期和时间,后面是标准。

关于时间对象Date()的更多相关文章

  1. JAVA基础学习之final关键字、遍历集合、日期类对象的使用、Math类对象的使用、Runtime类对象的使用、时间对象Date(两个日期相减)(5)

    1.final关键字和.net中的const关键字一样,是常量的修饰符,但是final还可以修饰类.方法.写法规范:常量所有字母都大写,多个单词中间用 "_"连接. 2.遍历集合A ...

  2. JavaScript之时间对象Date

    时间是物理学七大常量之一.生活中记录时间有两种方式(或者说有两种计时系统):GMT(格林尼治时间)和UTC(协调世界时间). 一 创建Date对象 JS中的Date对象只能通过new关键字创建. va ...

  3. js时间对象Date()

    Date ()是一个专门用来创建时间对象的,是一个复杂数据类型,具有读写属性 语法: var time = new Date() 返回值:当前终端的时间 // 1.创建当前时间对象 var time ...

  4. JavaScript 时间对象 date()

    getYear() 获得的是距离1900年过了多少年 var d = new Date(); document.write(d+"<br />"); document. ...

  5. JavaScript Date 时间对象方法

    Date(日期/时间对象) Date 操作日期和时间的对象 Date.getDate( ) 返回一个月中的某一天 Date.getDay( ) 返回一周中的某一天 Date.getFullYear( ...

  6. 项目心得——按照指定的日期/时间创建Date对象

    项目心得——按照指定的日期/时间创建Date对象 有时,在做项目中,需要获得指定日期的Date对象,这个指定的日期或者时间可能不是当前的时间.下面讲解两种获取指定日期/时间的Date对象的方法: pa ...

  7. JS对象 Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date();Date()的首字母须大写

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...

  8. 【转】JAVA 8 日期/时间(Date Time)API指南

    前言 本来想写下Java 8的日期/时间API,发现已经有篇不错的文章了,那就直接转载吧~ PS:主要内容没变,做了部分修改. 原文链接: journaldev 翻译: ImportNew.com - ...

  9. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. Swift学习之构造方法

    定义 构造过程是为了使用某个类.结构体或枚举类型的实例进行的准备过程.这个过程包含了为实例中的每个属性设置初始值和为其执行必要的准备和初始化任务. 构造方法可以被归结为指定构造方法与遍历构造方法,在S ...

  2. 【原创】08. easyui form控件,回调参数存在后缀 audio controls="controls" style="display: none;"></audio>

    版本: jQuery EasyUI 1.4.3 springmvc 3.2.6 谷歌浏览器,内核版本 chrome 56.0.2924.87 360急速浏览器,内核版本 chrome 50.0.266 ...

  3. 51nod 1130 N的阶乘的长度(斯特林近似)

    输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3.   Input 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - T + ...

  4. jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件

    一.插件介绍 FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.FlexSlider对于网站开发者来说是一个不错测JQUERY特效,因为支持全浏览器 ...

  5. 参数化Insert

    public void Insert(Customer item) {            string sql = @"USE [WXCustomerCard]GOINSERT INTO ...

  6. NYOJ 67 三角形面积(线代,数学)

    三角形面积 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 给你三个点,表示一个三角形的三个顶点,现你的任务是求出该三角形的面积   输入 每行是一组测试数据,有6个 ...

  7. PAT1074 Reversing Linked List (25)详细题解

    02-1. Reversing Linked List (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue ...

  8. js实现轮播图动画

    在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...

  9. Vue自定义事件

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...

  10. Opentk教程系列-1绘制一个三角形

    本系列教程翻译自Neo Kabuto's Blog.已经取得作者授权. 本文原文地址http://neokabuto.blogspot.com/2013/02/opentk-tutorial-1-op ...