浅谈js的date对象对时间字符串的解析

时间:2022-06-06
本文章向大家介绍浅谈js的date对象对时间字符串的解析,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

遇见问题

最近的时间都在开发社团内部的应用–隧道口,虽然只有简单的几个页面,但是依然是遇到了不少坑。 其中 date 的时间处理就是一个。

简单说一下需求。。现在在做一个活动列表,后台传一个json,里面包含活动的列表数组。 我遍历数组并创建对应的视图显示,并且以月份作为分类标准。 展示一下后台拿来的数据

做起来并不难,我开始写了如下版本

data.forEach(function (value, index) {
                var ct = new Date();

                var st = new Date(value.activity_start_time);//活动开始时间
                var et = new Date(value.activity_end_time);//活动结束时间

                var sm = st.getMonth() + 1; //月份

                var sd = st.getDate();
                sd = sd < 9 ? '0' + sd: sd; //日

                var sh = st.getHours();
                sh = sh < 9 ? '0' + sh: sh; //时

                var sn = st.getMinutes();
                sn = sn < 9 ? '0' + sn: sn; //分

                //...省略

                var params = {
                    id: value.id,
                    poster: value.activity_pic_url,
                    title: value.activity_name,
                    association: value.association_name,
                    location: value.activity_location,
                    like: value.like,
                    comment: value.comment,
                    status: status,
                    sclass: sclass,
                    day: sd,
                    clock: sh + ':' + sn
                };
                //渲染
                tpl += Mustache.render(self.item_tlp, params);
                tpl += '</div>';

            });

当然,这段代码成功运行了,至少我觉得成功运行了。

很完美的成功了。

可是在ios下运行的结果就很不理想了

全是 NAN 有没有。 一开始以为是 数字与字符串相加造成的问题(尽管js是可以数字与字符串相加的) 用parseInt改了一遍发现不行,后台调试发现在ios下显示 Invalid Date,看来是不同平台的Date对字符串的解析能力不同啊。

解决问题

之后我在ie上测试发现了同样的问题(想不到ios和ie居然有同样坑的一天)。 查阅资料发现了问题所在,new Date(str) 对传进入的字符串有一定的格式要求,不同平台不一样,像我们后台传过来的时间格式是 20xx-xx-xx 00:00:00

new Date("20xx-xx-xx 00:00:00")

这种格式在人看来是很容易理解了,然后,部分浏览器却解析不了,而所有浏览器都能解析的格式是

new Date("20xx/xx/xx 00:00:00")

于是对后台传过来的数据修改成 year/month/day 的格式

var st = new Date(Date.parse(value.activity_start_time.replace(/-/g,"/")));
var et = new Date(Date.parse(value.activity_end_time.replace(/-/g,"/")));

大功告成。

## 总之呢,以后解析时间用 year/month/day 就好