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() {
                @Override
                public 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 "";
                }

                @Override
                public 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问题

1. 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

4 Answers

activeoldestvotes

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

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

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