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

用户1394570

发布于 2018-08-08 10:05:22

1.2K0

发布于 2018-08-08 10:05:22

文章被收录于专栏：carvencarven

遇见问题

最近的时间都在开发社团内部的应用–隧道口，虽然只有简单的几个页面，但是依然是遇到了不少坑。其中 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 就好

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度