解决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框架myJSFrame附API使用帮助
Jun 28 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
javascript实现用户必须勾选协议实例讲解
Mar 24 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日历程序
2006/12/06 PHP
php5中类的学习
2008/03/28 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
javascript中new关键字详解
2015/12/14 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
js数组去重的hash方法
2016/12/22 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
python控制台中实现进度条功能
2015/11/10 Python
python删除服务器文件代码示例
2018/02/09 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python与js主要区别点总结
2020/09/13 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
教师绩效工资方案
2014/02/01 职场文书
毕业生自荐书
2014/02/03 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
双方协议书
2014/04/22 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
Python创建SQL数据库流程逐步讲解
2022/09/23 Python