解决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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
Vue.js基础知识小结
Jan 13 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
分析javascript原型及原型链
Mar 18 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
react中hook介绍以及使用教程
Dec 11 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP7.0版本备注
2015/07/23 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
vue仿ios列表左划删除
2019/09/26 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python类属性的延迟计算
2016/10/22 Python
Python常用算法学习基础教程
2017/04/13 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python二进制文件的转译详解
2019/07/03 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
一个都不能少观后感
2015/06/04 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL