时区简单理解
上面的链接是时区的wiki说明,下面说说我记住的部分:
GMT时区是格林威治标准时间,我把它理解为 “真实时间”
UTC时区是根据GMT得来的“世界标准时间”,它的时间和GMT是相同的
CST可以指下列的时区:
澳洲中部时间,Central Standard Time (Australia)
中部标准时区(北美洲),Central Standard Time (North America)北京时间,China Standard Time古巴标准时间,Cuba Standard Time,参见北美东部时区其中我们所在的时区背景时间 CST=UTC+8小时,也就是说,真实时间是0点的时候,背景时间是8点
ISO_8601日期格式标准
上面是日期格式标准的wiki
当前的UTC时间是2016-01-07T01:58Z,其中Z是4位数字格式的时间偏移量,不写的时候默认不偏移。
其中,字母T代表使用UTC时间,字母Z代表时间偏移量,实际写法中字母Z应该被偏移量替换,例如 "2017-1-7T10:21+0800"或者"2017-1-7T10:21-0800",字母Z被+0800和-0800替换了。
在浏览器中直接new一个date对象,因为我们处于UTC+0800的时区,所以控制台给我们打印出来的时间是GMT+0800的时间
2016-01-07T00:00 代表UTC时区1月7日0时0分(在控制台中显示UTC+0800时区为8时0分)
2016-01-07T00:00 0800 代表UTC+0800时区1月7日0时0分,2016-01-07T00:00 -0800 代表UTC-0800时区1月7日0时0分,在控制台中显示分别如下
通过日期字符串new一个Date对象,输入的时间字符串是2016-1-7 10:21,没有带ISO标准的“T”字母,因此浏览器认为我们想输入的是当地时间
HTML5 input标签datetime属性
下面问题来了,我要在页面上输入一个时间,存入数据库,上面说了那么多时区,那么用户在页面上输入的时间应该是哪个时区的呢,传到server,存入db的应该又是哪个时区的呢?
经测试
<input type="datetime" /> chrome上是不支持的
<input type="datetime-local" /> chrome支持
Google了一下据说是因为datetime输入框输入的是本地时区,考虑到时区的问题chrome没有支持此输入类型,会降级为text类型
datetime-local输入类型chrome是支持的,获取的value格式是:
"2016-1-7T10:21"
如上面所述,这个时间是标准UTC时间,这种时间从前端到后台到存入db,都是不会发生错误的。
但是对用户来说,他填写表单的时候想的时间肯定是他所在位置的本地时间,比如我输入"2016-1-7 10:21",我真实想输入的时间是"2016-1-7T10:21+0800",而不是"2016-1-7T10:21"。
为了支持这种情况,我需要把"2016-1-7T10:21"转换为用户真实想要的当地时间"2016-1-7 10:21",于是"2016-1-7 10:21".replace("T"," "),它实际代表的真实时间(UTC时间)是"2016-1-7T10:21+0800"
这样在前端是没问题了,但是传到后端之后,这样的非ISO标准时间是没有携带时区信息的,服务器收到之后会将这个时间安装服务器所在时区来处理,处理之后所代表的真实时间就和用户输入的真实时间不同了。所以我们在前端得把时间转换为ISO标准时间格式再传给服务器,这样服务器就能明白用户输入的真正的时间了,另一种方法,也可以把时间用毫秒数表示,传到后端,不过这种方式可读性不太好。
// 1.将字面时间转化为本地时间 2.将本地时间转换为真实GMT时间传入后台 function getRealGMT(datetime){ datetime=datetime.replace("T"," "); var temp=new Date(datetime); var realGMT=temp.getTime()+temp.getTimezoneOffset()*60000; return new Date(realGMT).format("yyyy-MM-ddThh:mm"); }