解决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 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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 多进程 解决难题
2009/06/22 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
带你了解python装饰器
2017/06/15 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python sorted方法和列表使用解析
2019/11/18 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
ASP.NET Core中的配置详解
2021/02/05 Python
python实现简单的学生管理系统
2021/02/22 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
庆元旦广播稿
2014/02/10 职场文书
校园文明标语
2014/06/13 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫