解决easyui日期时间框ie的兼容的问题


Posted in Javascript onMarch 01, 2018

前几天项目进入最后准备上线阶段,测试突然发现使用easyui的datetimebox插件获取的时间在ie的时候无法获取到比当前时间还往后的时间,当时是这么写的:

$(selector).datetimebox(
	{
formatter : function(date) {
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	var d = date.getDate();
	var h = date.getHours(); //获取当前小时数(0-23)
	var mi = date.getMinutes(); //获取当前分钟数(0-59)
	var s = date.getSeconds(); 
	var result = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
+ " " + (h < 10 ? '0' + h : h)
+ ":" + (mi < 10 ? '0' + mi : mi);
	
	//console.log(result+"--第127行");
	if(second==false){

	} else {
result += ":" + (s < 10 ? '0' + s : s);
	}
	return result;
},
  parser : function(s) {
	var t = Date.parse(s);
	if (!isNaN(t)) {
return new Date(t);
	} else {
return new Date();
	}
}
	});

测试谷歌浏览器等主流浏览器都没有问题,可以把一开始回显的时间显示出来,并可以选择时间,但是到ie的时候,却发现选择不了时间了,而且回显的日期也不对,老是当前的时间。调试了好久,才发现是ie浏览器不支持js的parse()方法。parse()方法是把日期解析转换成该日期的毫秒数。

formatter是格式化日期的格式。而parser是把解析你格式化的日期,具体写法看我截的API图吧:

解决easyui日期时间框ie的兼容的问题

因为parse在ie中无法使用~导致在ie下无法解析显示出格式化过后日期的时间。下面是我自己改过的代码:

$(selector).datetimebox( 
  { 
  formatter : function(date) { 
   var y = date.getFullYear(); 
 var m = date.getMonth()+1; 
 var d = date.getDate(); 
 var h = date.getHours(); 
 var min = date.getMinutes(); 
 return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+' '+(h<10?('0'+h):h)+':'+min; 
  }, 
  parser : function(s) { 
 var ss = (s.split(" ")); 
 var ymd = ss[0].split("-"); 
 var hms = ss[1].split(":"); 
 //console.log(ymd+" "+hms); 
 var y = parseInt(ymd[0],10); 
 var m = parseInt(ymd[1],10); 
 var d = parseInt(ymd[2],10); 
 var h = parseInt(hms[0],10); 
 var min = parseInt(hms[1],10); 
 if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min)){ 
 return new Date(y,m-1,d,h,min); 
 } else { 
 return new Date(); 
 } 
  } 
  });

formatter格式化的日期是xxxx-xx-xx xx:x。所以在下面parser解析时先通过日期和时间之间的空格,把他俩分割开来。ss[0]==xxxx-xx-xx,ss[1]==xx:xx。这样的话再通过-和:的分割,把他们分割成一个个数字,这样的话直接写入new Date()的参数里就可以返回正确的日期格式了~~好了,经测试完美兼容ie这个坑爹的浏览器。

今天在使用时突然发现这个方法的一个bug,那就是如何一开始datetime时间框没有数据是,会报split错误,所以今天修改了下,加了个为空判断:

if(s==""){ 
 return new Date(); 
 }else{ 
 //alert(s); 
 var ss = (s.split(" ")); 
 var ymd = ss[0].split("-"); 
 var hms = ss[1].split(":"); 
 //console.log(ymd+" "+hms); 
 var y = parseInt(ymd[0],10); 
 var m = parseInt(ymd[1],10); 
 var d = parseInt(ymd[2],10); 
 var h = parseInt(hms[0],10); 
 var min = parseInt(hms[1],10); 
 if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min)){ 
  return new Date(y,m-1,d,h,min); 
 } else { 
  return new Date(); 
 } 
 }

在这要注意s是个字符串类型~所以不能用s==null来做判断条件~

以上这篇解决easyui日期时间框ie的兼容的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让textarea自动调整大小的js代码
Apr 12 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
详解Immutable及 React 中实践
Mar 01 #Javascript
解决VUEX兼容IE上的报错问题
Mar 01 #Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 #Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 #Javascript
Node.js readline模块与util模块的使用
Mar 01 #Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 #Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 #Javascript
You might like
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
Javascript下的keyCode键码值表
2007/04/10 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python实现年会抽奖程序
2019/01/22 Python
Python 互换字典的键值对实例
2019/02/12 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
企业党建工作汇报材料
2014/08/19 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
素质拓展训练感想
2015/08/07 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016年五一促销广告语
2016/01/28 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL