解决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 相关文章推荐
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
vue实现循环切换动画
Oct 17 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
js实现验证码干扰(动态)
Feb 23 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/06/18 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jquery 选择器部分整理
2009/10/28 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js单例模式详解实例
2013/11/21 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python实现控制台中的进度条功能代码
2017/12/22 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
小学生安全保证书
2014/02/01 职场文书
统计岗位职责
2014/02/21 职场文书
爱情寄语大全
2014/04/09 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
老公保证书范文
2014/04/29 职场文书
文明村镇申报材料
2014/05/06 职场文书
经理任命书模板
2014/06/06 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
合作合同协议书
2016/03/21 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技