专栏首页carven浅谈js的date对象对时间字符串的解析

浅谈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 就好

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • xss总结记录

    最近工作小组上,集中精力提高安全意识。而XSS作为全端安全中最常见的问题之一,我们也做了着重的学习。 XSS全称跨站脚本(Cross Site Scriptin...

    用户1394570
  • html邮件模板编写实践

    行内样式写起来很痛苦,所以,一开始我打算写的是<style></style>标签。 写完后,我向各个主邮箱发送了测试

    用户1394570
  • gulp尝试开发

    这是挺久之前的事情了,还是觉得先记录下来,免得自己忘记了。 在实习的公司做web开发,gulp 是经常用到的,可是我做的不仅仅的前端,还包括后台, 所以将前端文...

    用户1394570
  • jQuery Validate自定义各种验证方法jQuery Validate自定义各种验证方法

    一个会写诗的程序员
  • easyui validate 后 使用ajax提交

    <form id="gfxwjForm" name="gfxwjForm" action="" method="post" enctype="multipart...

    用户5640963
  • 哪个瞬间你对科研圈彻底失望了?

    科研圈立足象牙塔,面向最前沿的技术与领域。但身在其中才知道这个圈子并不是想象中那么纯粹。

    小白学视觉
  • PC逆向之代码还原技术,第四讲汇编中减法的代码还原

    在讲解减法的代码还原之前.我们首先要知道. 减法在汇编中对应的指令是什么. Sub 汇编指令. Sub x,y 将x的值 加上y 并且重新赋值给x

    IBinary
  • 2.8折数据库,开抢!

    老铁们,腾讯云新春采购季即将结束,倒计时10天,速度上车! 数据库2.8折起,最热配置史低价疯狂秒杀 9:00-11:00,11:00-14:00 16:00...

    腾讯云数据库 TencentDB
  • 第一课 读懂代码 - swift简明指南

    这个指南有点不一样,每一个章节都可以独立实验,难度都是0基础即可掌握,开发前只需要准备mac电脑,然后装上xcode。

    mixlab
  • 一篇文章,彻底理解ReentrantLock

    ReentrantLock重入锁,是实现Lock接口的一个类,也是在实际编程中使用频率很高的一个锁,支持重入性,表示能够对共享资源能够重复加锁,即当前线程获取该...

    李红

扫码关注云+社区

领取腾讯云代金券