首页 > js/Jquery, Php > IE7/IE8下javascript的时间函数Date()不兼容讲解–来自amcharts应用中的问题

IE7/IE8下javascript的时间函数Date()不兼容讲解–来自amcharts应用中的问题

最近在使用ammap和amcharts做一些数据可视化展现的工作,amcharts图表功能真的很强大,可自定义的属性很多。这是其官网文档链接。可以简单看看文档,会发现有很多属性,可以对图表中的每块表示数据的区域绑定事件,可以是一个url,也可以是一个js,怎么样,只有这两项,就绝对能满足很多扩展的需要了吧。

这是一个我做的例子,使用了ammap和amcharts,左边中国地图,不同省份的数据不一样,颜色代表不同等级的数据;右边是amcharts做的柱状图和折线图。

ammap和amcharts的案例--好用可扩展的javascript图表插件

ammap和amcharts的案例--好用可扩展的javascript图表插件

问题就在使用图表的过程中了,主要是右下角的那个折线图,在chrome、firefox、opera和IE9下均看过了,没有问题,可是到别人机器上,用的IE8,发现右下角的折线图出问题了。于是开始了JS的调试之旅,使用IE9的开发人员工具,可以很方便的调到IE7和IE8模式,之前一直都是firefox的firebug,现在一直都在用chrome,今天用了用IE9的调试工具,发现也挺好用的,主要是它有一个选项,可以设置为-始终从服务器中刷新,这样,每次IE运行获得的JS和CSS文件等,都不会是缓存中来的,调试起来很方便,不用总去清缓存。见下图:

IE9-开发人员工具-清缓存-始终从服务器中刷新

IE9-开发人员工具-清缓存-始终从服务器中刷新

然后就跟调反汇编一样的,,开始调试JS了(最让人纠结了~~)。。通过设置为-“错误时中断”,从js中出问题的地方开始调试,然后一层层往父节点找出问题的原因,先是发现有些地方传递的参数有问题,为NAN,然后开始找这个错误数据是哪来的,继续找,最后发现是图表中传递的时间参数发生了问题,最终定位到了问题所在:

$.ajax({
			url: '/xxx/yyy/getProvinceDetial',
			data: {
				province:province, product: product, isp: isp
			},
			dataType: 'json',
			type: 'post',
			beforeSend:function(){
					$('#innerinChart').append('<center id="loading">加载中,请稍候...</center>');
			},
			success: function(data){
				if( data.status === 0 ){
					alert(data.info);
				}else{
					$('#loading').remove();
					$.each(data.info.data, function(k,v){
						 var newDate = new Date(k);
						var object = {date: newDate};
							$.each(v, function(name, value){
								object[name] = value;
						  });
						  chartData.push(object);
					});
					$.each(data.info.keys, function(k,v){
						// console.log(v);

						var graphN = new AmCharts.AmGraph();
						graphN.valueAxis = valueAxis1; // we have to indicate which value axis should be used
						graphN.title = v;
						graphN.valueField = v;
						graphN.bullet = "square";
						graphN.lineThickness = 4;
						chart.addGraph(graphN);

					});
				}

			}
		});

在一个Ajax请求中,把获得的字符串形式的时间参数,通过js下的 Date() 函数转化为时间格式的数据,在IE9+和chrome、firefox下均可直接运行,但是在IE7和IE8下会无法转化,返回NAN的数据(IE6没试,估计更不行,也不想再做什么东西都要去专门适配IE6了,让它早死早超生吧)。

但是问题还是需要解决啊,所以查了点资料,看看如何在IE7/8下,能把字符串格式数据转化为时间格式,找到了这个资料,有很多JS的小知识,大家可以保存起来,找时间看看,说不准哪天你做东西碰到问题了,也能在这里边找到解决办法。为了保险,我自己把这个页面也保存了一份
在这里,我们可以看到,它给了一个把字符串格式的时间转化为时间格式的函数。
An Extended ISO 8601 local Date format YYYY-MM-DD can be parsed to a Date with the following:-

 /**Parses string formatted as YYYY-MM-DD to a Date object.
   * If the supplied string does not match the format, an
   * invalid Date (value NaN) is returned.
   * @param {string} dateStringInRange format YYYY-MM-DD, with year in
   * range of 0000-9999, inclusive.
   * @return {Date} Date object representing the string.
   */
  function parseISO8601(dateStringInRange) {
    var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
        date = new Date(NaN), month,
        parts = isoExp.exec(dateStringInRange);

    if(parts) {
      month = +parts[2];
      date.setFullYear(parts[1], month - 1, parts[3]);
      if(month != date.getMonth() + 1) {
        date.setTime(NaN);
      }
    }
    return date;
  }

我们只要把这个函数拿来,替代原来的Date()函数就可以啦。

  1. Ling.Carlos 8月 2nd, 2013 @ 17:59 | #1

    感谢分享,解决我一个问题

  2. 匿名 11月 18th, 2014 @ 19:33 | #2

    以这种方式怎样获取两个时间的时间差呢?比如差几天几小时几分钟?

  3. 匿名 12月 10th, 2014 @ 18:13 | #3

    谢谢 ,解决了我的问题

  4. 111 1月 26th, 2016 @ 11:21 | #4

    可以用Date.parse(str.replace(/-/g, ‘/’));试试

评论提交中, 请稍候...

留言

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks