safari浏览器下解决Date日期的NAN问题

今天给大家分享一个我在工作中遇到的坑！

我自己写代码都是在模拟器上面调试程序的嘛，今天测试把程序在IOS系统上面运行给我看，什么鬼！时间全部是NaN，android上没问题，我页面用的vue.js套的嘛，用了个过滤器，先上代码

  filters: {//时间过滤器formatDate(time) {/*let date = new Date(Date.parse(time.replace(/-/g, "/")));*/let date = new Date(time);return formatDate(date, 'yyyy-MM-dd');//此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用},formatDates(time) {let date = new Date(time);return formatDate(date, 'hh:mm:ss');//此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
}}

我用的是一个自定义的过滤器，一看没问题呀，它在Firefox、Chrome中就能运行，但是放在Safari就会报错，错误是NaN，意思是Not a Number。就是因为这个错，苹果手机不能正常运行我开发的这个界面，当时都快郁闷死了，然后就去查资料发现

YYYY-MM-DD HH:MM:SS格式无法解析，需要转换成YYYY/MM/DD HH:MM:SS格式。在firefox和chrome中可以直接支持Date.parse(YYYY-MM-DD HH:MM:SS)，但是safari无法支持；

我的解决方法是直接在后台就把格式转换了

public static void JsonTimestampToDateFmtValIOS(JsonConfig config) {config.registerJsonValueProcessor(Timestamp.class,new JsonValueProcessor() {@Overridepublic Object processObjectValue(String arg0, Object arg1,JsonConfig arg2) {SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");Timestamp t = (Timestamp) arg1;if (t != null) {return sdf.format(t);}return "";}@Overridepublic Object processArrayValue(Object arg0, JsonConfig arg1) {return null;}});
}

@RequestMapping
public  void getMyepuerPage(Long museId, HttpServletResponse response, HttpServletRequest request) throws BusiHandlerException {ResponseMsg rm=new ResponseMsg(ResponseMsg.TYPE_SUCCESS,"查询成功");try {PageBean<MemberEpurseLog,MemberEpurseLog> bean=this.getPageBean(request);this.appMyEpuerService.getMyepuerPage(museId,bean);rm.setResult(bean);} catch (Exception e) {e.printStackTrace();log.info("交易流水查询失败，原因："+e.getMessage());rm=new ResponseMsg(ResponseMsg.TYPE_ERROR,"查询失败");}JsonConfig config=new JsonConfig();JsonToDateFmtUtil.JsonTimestampToDateFmtValIOS(config);config.setExcludes(new String[]{"memberUser"});this.outPrint(response,request, JSONObject.fromObject(rm,config).toString());
}

问题一：
网上是这样写的：var date =new Date("2016/05/31 08:00");所以写一个函数，这样Android和IOS就能共用了，写了个函数，替换一下！function GetDateDiff(startDiffTime, endDiffTime) {  //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式   startTime = startDiffTime.replace(/\-/g, "/");  endTime = endDiffTime.replace(/\-/g, "/");
};

 问题二：HTML5中新增了日历控件，如果将控件的type=“datetime-local”，如果是Chrome，
控件的日期显示格式是2016/05/30 08:00 ，如果是Safari，日期的显示格式是：2016-05-31T08:00，
当我们用JQuery取值赋值的时候，就必须用这种方式才能赋值：假如说这个日历控件的id是timeDate，
代码如下：$("#timeDate').val("2016-05-30T08:30");  用$("#timeDate').val("2016/05/30 08:30");就会报错。
可是Chrome的显示方式就是这样的啊！！！尼玛的还有天理吗？这两个坑肯定不光坑过我自己一个人，希望以后注意吧！

以下上来自网上的摘抄：

safari浏览器下解决Date日期的NAN问题

var date = new Date(Date.parse(expireDate.replace(/-/g, "/")));

第一，用正则表达式做简单的匹配有两种方式：

1. 如果只有个别JS文件，建议采用这种方式

new Date('2017-03-12'.replace(/-/g, "/")).format("yyyy-MM-dd hh:mm"); Date('2017-03-12'.replace(/-/g, "/")).format("yyyy-MM-dd hh:mm");

2. 提取一个共同的方法

function parseDate(input) {var parts = input.match(/(\d+)/g);return new Date(parts[0], parts[1]-1, parts[2]);
}parseDate('2011-01-03'); // Mon Jan 03 2011 00:00:00

参照如下：new Date() using Javascript in Safari

new Date() using Javascript in Safari

up vote10down votefavorite

I'm having an issue using the new Date() function in Javascript. Safari is giving me an "Invalid Date" message.

I've created a short example at jsbin.

This appears to work on all other browsers, but not Safari. Any ideas on how I can take the value from an input (such as 2011-01-03) and turn it into a date object, while having it work properly in Safari?

Many thanks!

javascript jquery date safari new-operator

shareeditflag

edited Jan 7 '11 at 5:48

asked Jan 7 '11 at 5:21

Dodinas

2,192175489

add a comment

start a bounty

4 Answers

activeoldestvotes

up vote36down voteaccepted

The date parsing behavior on JavaScript is implementation-dependent, the ISO8601 format was recently added to the ECMAScript 5th Edition Specification, but this is not yet supported by all implementations.

I would recommend you to parse it manually, for example:

function parseDate(input) {var parts = input.match(/(\d+)/g);return new Date(parts[0], parts[1]-1, parts[2]);
}parseDate('2011-01-03'); // Mon Jan 03 2011 00:00:00

Basically the above function matches each date part and uses the Date constructor, to build a date object, note that the months argument needs to be 0-based (0=Jan, 1=Feb,...11=Dec).

shareeditflag

answered Jan 7 '11 at 6:45

CMS

469k129769772

This did it. Thanks for the clarification. – Dodinas Jan 7 '11 at 8:01

第二，引入DateJS格式化标准日期库参考：DateJS

var currentDate = Date.parseExact("2017-01-12", "dd-MM-yyyy"); currentDate = Date.parseExact("2017-01-12", "dd-MM-yyyy");

Date对象在Safari与IOS中的“大坑”相关推荐

JavaScript中的Date对象在Safari与IOS中的“大坑”
最近小编在做一个会议室预定的功能,这个功能就像在买电影票时选择座位一样,看看会议室的哪个时间段空闲,有什么设备等等.由于我做的是APP,APP既要兼容Android,又要兼容IOS,刚开始的开发与调试 ...
Date对象在Android和IOS上的兼容
之前在公司做过会议室的一个项目,在时间操作上发现一个Android和IOS的兼容问题,看下面的对比图: chrome浏览器上创建一个时间对象 safria浏览器创建一个时间对象看上面的对比输出即可知 ...
json Date对象在js中的处理办法
我们在程序用往往通过ajax方式返回json数据,json中包含Date对象时,在js中是Object对象.可以方式获取: 1.new Date(yourJsonDate.time); //你用你的返 ...
python中date用法_Python教程--date 对象用法
date 对象 date 对象代表一个理想化历法中的日期(年.月和日),即当今的格列高利历向前后两个方向无限延伸. 公元 1 年 1 月 1日是第 1 日,公元 1 年 1 月 2 日是第 2 日,依 ...
JavaScript中Date对象在IOS中的坑及解决方案
踩坑记录: 使用vant-ui库中DatetimePicker 时间选择,初始化时间列表或者动态赋值选择时间项时IOS报错: [Vue warn]: Invalid prop: custom vali ...
Date对象 IOS踩坑
Date对象 IOS踩坑最近在做一个托管教师端小程序,里面有一个功能是选择某个日期加载该老师相关的课程,这里就需要用到日历组件.基于后台返回的数据及减少对日历组件的修改,我选择了对小程序一开始自配备 ...
微信小程序中解决iOS中new Date() 时间格式不兼容
本周写小程序,遇到的一个bug,在chrome上显示得好好的时间,一到Safari/iPhone 就报错 "invalid date",时间格式为"2019.06.06 ...
mysql中获取时间的年月日_关于苹果ios中的Date()获取时间NaN的问题
项目开发过程中难免会遇到倒计时,获取时间等类似的问题,然而ios端获取时间戳时发现,显示结果NaN(nont a number),安卓端显示是ok的. ***原因:Date()内时间格式问题*** i ...
javascript中Date对象的初始化方法
为什么80%的码农都做不了架构师?>>> 在前端代码中难免会涉及到时间的操作,如何构造一个Date对象呢?javascript为我们提供如下几种方式: new Date(&qu ...

Date对象在Safari与IOS中的“大坑”

safari浏览器下解决Date日期的NAN问题

new Date() using Javascript in Safari

4 Answers

Date对象在Safari与IOS中的“大坑”相关推荐

最新文章

热门文章