解决easyui日期时间框ie的兼容的问题

前几天项目进入最后准备上线阶段,测试突然发现使用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图吧:

因为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的兼容的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • jquery easyui 对于开始时间小于结束时间的判断示例
(0)

相关推荐

  • jquery easyui 对于开始时间小于结束时间的判断示例

    对于开始时间小于结束时间的判断可以参考,jquery easyui里的ValidateBox进行判断 好吧!直接上代码 复制代码 代码如下: 查看内容:按时间: <input class="easyui-datetimebox" style="width: 180px" id="start2" value="${startTime}"> <span class="newfont06">

  • 解决easyui日期时间框ie的兼容的问题

    前几天项目进入最后准备上线阶段,测试突然发现使用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(); //获取当前小

  • jQuery EasyUI API 中文文档 DateTimeBox日期时间框

    扩展自 $.fn.datebox.defaults.用 $.fn.datetimebox.defaults 重写了 defaults. 依赖 datebox timespinner 用法 复制代码 代码如下: <input id="dt" type="text"></input> 复制代码 代码如下: $('#dt').datetimebox({ showSeconds:false }); 特性 其特性扩展自 datebox,下列是为 dat

  • easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码

    一.Html代码 注意的是需要加上data-options="editable:false",不能直接修改日期 <tr> <td width="15%" class="label">合同起始日期:</td> <td width="35%"> <input value="${loan.contractBegtime}" class="f1 eas

  • 微信小程序使用picker实现时间和日期选择框功能【附源码下载】

    本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick

  • JS利用Intl解决前端日期和时间的格式化详解

    目录 简介 构造 locales 参数 options 参数 Intl.NumberFormat Intl.DateTimeFormat 简介 Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式. 在前端开发中,我们通常会使用第三方库来处理日期和数字的格式化,比如 numeral.dayjs.date-fns 等库,这些库包含了许多的功能,如果我们在项目中仅仅只使用了格式化的功能的话其实是可以不用引入这些库的,JavaScript 自带的

  • MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决

    目录 TIMESTAMP类型返回日期时间数据中带有 T 场景描述 通过注解格式化(方法一) 通过全局配置(方法二) MySQL时间类型timestamp知识点 mysql日期时间类型 Timestamp实例 总结 TIMESTAMP类型返回日期时间数据中带有 T 场景描述 MySQL 中使用 TIMESTAMP 类型 实体类使用 java.util.Date 类型 返回 JSON 数据: 通过注解格式化(方法一) 可以在日期类型属性上,或者 GET 方法加上 Jackson 的 @JsonFor

  • Angularjs验证用户输入的字符串是否为日期时间

    在angularjs中,想在文本框中,验证用户输入的字符串是否为日期时间. 刚开始时,Insus.NET想到的是正则,这只是验证到日期与时间的格式是否正确而已,而对于2月最后一天或是30或是31号,还是无能为力. 因此,Insus.NET想使用angularjs的自定义指令来验证解决此问题. 在ASP.NET MVC的项目中,创建一个控制器,并创建一个Action: 控制器源代码: using System; using System.Collections.Generic; using Sys

  • jquery获取easyui日期控件的值实现方法

    jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery获取easyui日期控件的值 jquery easyui 日期框 有这样的一个日期文本框: <input type="text" name="mdate" size="20" value="" id="mdate" class="easyui-datebox"/> 使用easyui给文本框

  • JavaScript 日期时间选择器一些小结

    flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScript 日期时间选择器. 下载 演示 GitHub flatpickr 不依赖于任何库.更小的用户界面,但有很多主题.丰富的 API 和事件系统使其适用于任何环境.可用于 webpack ,也可作为 jQuery 插件使用. 安装 安装 flatpickr 模块 使用 NPM 安装 flatpickr 模块.包管理工具: https://www.npmjs.com/package/bower-npm-resolv

  • 解决layui laydate 时间控件一闪而过的问题

    问题:一个页面多次重载时间控件,并且都是不同页面,会导致时间控件绑定了,又被覆盖其他id的时间控件,又重新绑定上去.就会导致点击日期框 ,弹框一闪而过,从其他弹窗切换回来,又有了. 解决方式: 1.把lay-key去掉 2.在每次加载对应页面的时间绑定 以上这篇解决layui laydate 时间控件一闪而过的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐