解决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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
jQuery插件制作的实例教程
May 16 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 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设计模式中工厂模式详细介绍
2013/05/15 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
javascript编程起步(第六课)
2007/01/10 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
js new Date()实例测试
2019/10/31 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python 复平面绘图实例
2019/11/21 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
反邪教警示教育方案
2014/05/13 职场文书
人才市场接收函
2015/01/30 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript