解决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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
php隐藏实际地址的文件下载方法
2015/04/18 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript中的Document文档对象
2008/01/16 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python实现猜拳小游戏
2020/04/05 Python
django创建超级用户过程解析
2019/09/18 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
六一亲子活动总结
2014/07/01 职场文书
电子工程求职信
2014/07/17 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android