My97DatePicker IE兼容问题

已解决

  • 已解决
    我的沙雕问题已经解决了,希望你看过之后也能有启发。
    (没启发我也没办法)

问题描述

我发现的问题:日期选择在Chrome等浏览器上正常弹出选择框,在IE上不能。

  1. 在Chrome浏览器上完全没问题 ,我用的My97 4.8.0版本,基本兼容了一些主流浏览器;
  2. 但是在IE上不能兼容,这个IE具体是指我电脑自带的 IE11 ,这个问题就很大了,毕竟IE6、7、8不兼容我可以理解,IE9+不能兼容就很沙雕了,一定是插件的问题! 我的代码不可能出bug

在 菜单栏>帮助>关于 查看IE版本

  1. 我日期选择的代码
    以防万一我把日期选择相关的完整代码贴上来了
<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<script src="../My97DatePicker/WdatePicker.js"></script>
   	<script type="text/javascript" src="../js/index.js"></script>
   	<title></title>
   </head>
<body>
   <input id="dStart" type="text" onclick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM',minDate:'%y-%M',onpicked:pickedFunc1})" />
</body>
</html>

index.js文件在这儿
仔细看发现我除了贴了pickedFunc1这个方法之外,还额外放了一个request_form方法
这个方法使跟后台数据交互的,用的vue.js,先买个 伏笔吧

/* 日期选择自定义方法 */
function pickedFunc1(dp) {
	$dp.$('dEnd').click();
	startTime = $dp.cal.getDateStr();
}
function request_form() {
	var vm = new Vue({
		el: '.agileits_reservation',
		data: {
			inputtext: {
				name: "",
				phone: '',
				startTime: '',
				endTime: '',
			},
			apiUrl: formURL,
			defaultInput:''
		},
		created:function(){
			defaultInput = JSON.parse(JSON.stringify(this.inputtext));
		},
		methods: {
			submit: function() {
				this.inputtext.startTime = startTime;
				this.inputtext.endTime = endTime;
				vue.$http.post(vue.apiUrl, vue.inputtext, {
					emulateJSON: true
				}).then((response)=> { //成功
					success();
				}, function(res){ //失败
					console.log(res)
				});
			}
		},
	})
}

解(xin)决(lu)过(li)程(cheng)【不用看】

我自己瞎debug的过程,不用看
当然要先面向Google编程,一通搜索后,发现没有解决我的问题
万般无奈下点开了My97DatePicker官方文档

在这里插入图片描述
文档上说了,是我的问题,但我没有全信,开始了一步一步调试代码的过程
第一步:单拿出来日期选择代码调试,发现下面这个样子↓IE上不能弹出日期选择框

	<input id="dStart" type="text" onclick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM',minDate:'%y-%M',onpicked:pickedFunc1})" />

而↓这个样子却可以,区别就是上面那个我把 自定义事件 写在index.js里面了

	<input id="dStart" type="text" onclick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM',minDate:'%y-%M',onpicked:function(dp){startTime = $dp.cal.getDateStr();}})"/>

所以这个锅index.js背了
首先明确一下Chrome上控制台没有报错
不得已打开了IE开发者人员工具,果然报错
在这里插入图片描述在这里插入图片描述
报错的竟然是vue的后台请求的这一行
机智的我马上想到可能是 (response)=> 的问题
修改:

function request_form() {
	    ...
		methods: {
			submit: function() {
				...
				}).then(function() { //成功
					success();
				}, function(res){ //失败
					console.log(res)
				});
			}
		},
	})
}

成功了!
IE上再试果然可以弹出了

课代表画重点

  • 查看My97DatePicker官方文档,支持IE6.0+的浏览器,自己的锅
  • Chrome没问题,IE上F12 debug(开发人员工具)
  • 报错的不是My97相关的方法,而是vue的后台数据请求函数
  • 把请求成功的返回函数(response)=>改为function(),改错成功
  • IE不兼容箭头函数,改
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页