问题遇到的现象和发生背景
使用的是IE11浏览器，出现问题的代码是我在网上找的一个时间选择器插件的js
问题相关代码
XNDatepicker.prototype = {
init() { //提示就是第二行这里缺少“：”。 本人是后端开发 刚好钱短休产假了 就帮忙处理一下 头大
this.setCurrentTime({startTime: this.option.startTime, endTime: this.option.endTime})
this.rendDatePicker();
this.setPosition();
this.addEvent();
this.initCallback();
this.initTimePicker();
this.rendHoverStyle();
this.setDate();
this.confirm(false,true);
},
运行结果及报错内容
function dynamicLoadJs(urllist) {
for (let i = 0; i < urllist.length; i++) {
let url = urllist[i];
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('script');
link.src = url;
var finelurl = '<script type="text/javascript" src=' + url + '><\/script>'
document.getElementsByTagName('head')[0].append(link)
document.write(finelurl)
}
}
function dynamicLoadCss(urllist) {
for (let i = 0; i < urllist.length; i++) {
let url = urllist[i];
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
}
}
var s = document.currentScript.src;
var csspath = s.substr(0, s.lastIndexOf('/') - 0);
var csslist = ["https://at.alicdn.com/t/font_2213760_as9380qm7dw.css",csspath+"/xndatepicker.css"]
var jslist = [csspath + "/xntimepicker.js"]
dynamicLoadCss(csslist);
dynamicLoadJs(jslist);
(function (window, $) {
var format={
'week':'YYYY-MM-DD',
'date':'YYYY-MM-DD',
'daterange':'YYYY-MM-DD',
'datetime':'YYYY-MM-DD HH:mm:ss',
'datetimerange':'YYYY-MM-DD HH:mm:ss',
'month':'YYYY-MM',
'monthrange':'YYYY-MM',
'year':'YYYY',
'yearrange':'YYYY',
'multiple':'YYYY-MM-DD'
}
var shortList={
'multiple':[],
'week':[
{"name": "最近一周", "value": {startTime: moment().startOf('week'), endTime:moment().endOf('week')}},
{"name": "本月第一周", "value": {startTime: moment().startOf('month').startOf('week'), endTime:moment().startOf('month').endOf('week')}},
{"name": "本年第一周", "value": {startTime: moment().startOf('year').startOf('week'), endTime:moment().startOf('year').endOf('week')}},
],
'date':[
{"name": "今天", "value": {startTime: moment().startOf('day')}},
{"name": "昨天", "value": {startTime: moment().subtract(1, 'days').startOf('day')}},
{"name": "本周第一天", "value": {startTime: moment().startOf('week').startOf('day')}},
{"name": "本月第一天", "value": {startTime: moment().startOf('month').startOf('day')}},
{"name": "本年第一天", "value": {startTime: moment().startOf('year').startOf('day')}},
],
'datetime':[
{"name": "现在", "value": {startTime: moment()}},
{"name": "今天", "value": {startTime: moment().startOf('day')}},
{"name": "昨天", "value": {startTime: moment().subtract(1, 'days').startOf('day')}},
{"name": "本周第一天", "value": {startTime: moment().startOf('week').startOf('day')}},
{"name": "本月第一天", "value": {startTime: moment().startOf('month').startOf('day')}},
{"name": "本年第一天", "value": {startTime: moment().startOf('year').startOf('day')}},
],
'daterange':[
{"name": "最近一天", "value": {startTime: moment().subtract(1, 'days'), endTime: moment()}},
{"name": "最近三天", "value": {startTime: moment().subtract(3, 'days').startOf('day'), endTime: moment()}},
{"name": "最近一周", "value": {startTime: moment().subtract(7, 'days').startOf('day'), endTime: moment()}},
{"name": "最近一月", "value": {startTime: moment().subtract(1, 'months').startOf('day'), endTime: moment()}},
{"name": "最近一年", "value": {startTime: moment().subtract(1, 'years').startOf('day'), endTime: moment()}},
{"name": "本月", "value": {startTime: moment().startOf('month').startOf('day'), endTime: moment()}},
{"name": "本年", "value": {startTime: moment().startOf('year').startOf('day'), endTime: moment()}},
],
'datetimerange':[
{"name": "今天", "value": {startTime: moment().startOf('day'), endTime: moment()}},
{"name": "最近一天", "value": {startTime: moment().subtract(1, 'days'), endTime: moment()}},
{"name": "最近三天", "value": {startTime: moment().subtract(3, 'days'), endTime: moment()}},
{"name": "最近一周", "value": {startTime: moment().subtract(7, 'days'), endTime: moment()}},
{"name": "最近一月", "value": {startTime: moment().subtract(1, 'months'), endTime: moment()}},
{"name": "最近一年", "value": {startTime: moment().subtract(1, 'years'), endTime: moment()}},
{"name": "本月", "value": {startTime: moment().startOf('month'), endTime: moment()}},
{"name": "本年", "value": {startTime: moment().startOf('year'), endTime: moment()}},
],
'month':[
{"name": "本月", "value": {startTime: moment().startOf('month'), endTime: moment()}},
{"name": "上月", "value": {startTime: moment().subtract(1, 'month').startOf('month'), endTime: moment()}},
// {"name": "本年一月", "value": {startTime: moment().startOf(1, 'year').startOf('month'), endTime: moment()}},
],
'monthrange':[
{"name": "最近一月", "value": {startTime: moment().subtract(1, 'months').startOf('month'), endTime: moment()}},
{"name": "最近两月", "value": {startTime: moment().subtract(2, 'months').startOf('month'), endTime: moment()}},
{"name": "最近三月", "value": {startTime: moment().subtract(3, 'months').startOf('month'), endTime: moment()}},
{"name": "最近一年", "value": {startTime: moment().subtract(1, 'years').startOf('month'), endTime: moment()}},
{"name": "本年", "value": {startTime: moment().startOf('year').startOf('month'), endTime: moment()}},
],
'year':[
{"name": "本年", "value": {startTime: moment().startOf('year')}},
{"name": "去年", "value": {startTime: moment().subtract(1, 'years').startOf('year')}},
{"name": "三年前", "value": {startTime: moment().subtract(3, 'years').startOf('year')}},
{"name": "五年前", "value": {startTime: moment().subtract(5, 'years').startOf('year')}},
],
'yearrange':[
{"name": "最近一年", "value": {startTime: moment().startOf('year'), endTime: moment()}},
{"name": "最近两年", "value": {startTime: moment().subtract(2, 'years').startOf('year'), endTime: moment()}},
{"name": "最近三年", "value": {startTime: moment().subtract(3, 'years').startOf('year'), endTime: moment()}},
{"name": "最近五年", "value": {startTime: moment().subtract(5, 'years').startOf('year'), endTime: moment()}},
{"name": "最近十年", "value": {startTime: moment().subtract(10, 'years').startOf('year'), endTime: moment()}},
]
}
var option = {
showWeek: true,//是否显示周几
placeholder:'请选择',
shortList: [],
locale:{
month:[
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月',
],
monthHead:[
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
week:['日','一','二','三','四','五','六'],
clear:'清空',
confirm:'确定',
yearHeadSuffix:'年'
},//显示信息
confirmFirst:true,//第一次就搜索
separator:' 到 ',//双日历模式下的链接符
showType:'modal',//显示样式
linkPanels:false,//双日历面板联动
showClear:true,//是否显示清除按钮
autoConfirm:true,//单日历模式，和周日历模式，是否自动确定
showShortKeys:true,//是否显示快捷选项
autoFillDate:true,//自动变更element里面的值，如果自动变更，则按照插件样式显示
firstDayOfWeek:7,//周起始日 1-7
theme:'default',//主题
multipleDates:[],//当为多选日期类型时的初始值
startTime:'',//初始开始时间
endTime:'',//初始结束时间
minDate:'',//最小时间
maxDate:'',//最大时间
}
function XNDatepicker(targetDom, options,onConfirm) {
this.$targetDom = $(targetDom);
this.option = $.extend(false, option, options);
this.type = this.option.type;
this.format = this.type.indexOf('year') > -1 ? 'YYYY' : (this.type.indexOf('month') > -1 ? 'YYYY-MM' : (this.type.indexOf('time') > -1 ? 'YYYY-MM-DD' : 'YYYY-MM-DD'));
this.option.startTime=moment(this.option.startTime||moment());
this.option.endTime=moment(this.option.endTime||moment());
this.option.minDate && (this.option.minDate=moment(this.option.minDate));
this.option.maxDate && (this.option.maxDate=moment(this.option.maxDate));
this.onConfirm=onConfirm;
this.selectedDate = {};//已确认的时间
this.date1=this.option.startTime.clone();//当前选择的起始时间
this.date2=this.option.endTime.clone();//当前选择的起始时间
this.tempdate1;//左侧选择器的时间
this.tempdate2;//右侧选择器的时间
this.multipleDates=$.extend(true,[],this.option.multipleDates||[]);
if(!options.shortList){
this.option.shortList=shortList[this.type]
}
if(!options.format){
this.option.format=format[this.type]
}
this.id = this.getRandomString();
this.show = false;
this.eventList = {};
this.init();
this.addPosEvent();
this.addTargetEvent();
}
XNDatepicker.prototype = {
init() {
this.setCurrentTime({startTime: this.option.startTime, endTime: this.option.endTime})
this.rendDatePicker();
this.setPosition();
this.addEvent();
this.initCallback();
this.initTimePicker();
this.rendHoverStyle();
this.setDate();
this.confirm(false,true);
},
resetCurrentTime(startTime,endTime) {//显示日历的时候，重新设置当前的日期
if(this.type=='multiple'){
this.multipleDates=$.extend(true,[],this.selectedMultiple||[]);
}
if(!this.selectedDate[0]){
this.selectedDate[0]=moment();
}
if(!this.selectedDate[1] && (this.type=='week' || this.type.indexOf('range')>-1)){
this.selectedDate[1]=moment();
}
if(startTime){
this.selectedDate[0]=moment(startTime);
}
if(endTime){
this.selectedDate[1]=moment(endTime);
}
this.setCurrentTime({startTime: this.selectedDate[0], endTime: this.selectedDate[1]});
this.setCurrentDay();
this.updateCurrentTime(1);
this.updateCurrentTime(2);
this.setPosition();
},
getCurrentTargetTime() {
var str = ''
if (this.$targetDom[0].nodeName == 'INPUT') {
str = this.$targetDom[0].value;
} else {
str = this.$targetDom[0].innerHTML;
}
// console.log(str)
},
updateCurrentTime(num) {
if (this['timepicker' + num]) {
var date = moment(this.selectedDate[num - 1]).format('YYYY-MM-DD HH:mm:ss');
this['timepicker' + num].updateCurrentTime(date)
}
},
initTimePicker() {
var that = this;
if (this.type == 'datetime' || this.type == 'datetimerange') {
this.timepicker1 = new XNTimepicker(this.$container.find('.time1 .timecont'), {
time: that.selectedDate[0],
onConfirm(res) {
var currentTime = moment(that.selectedDate[0])
currentTime = currentTime.hours(res.value.hour);
currentTime = currentTime.minutes(res.value.minute);
currentTime = currentTime.seconds(res.value.second);
that.date1 = currentTime;
that.$container.find('.time1 .timecont>span').html(res.str)
}
})
}
if (this.type == 'datetimerange') {
this.timepicker2 = new XNTimepicker(this.$container.find('.time2 .timecont'), {
time: that.selectedDate[1],
onConfirm(res) {
var currentTime = moment(that.selectedDate[1])
currentTime = currentTime.hours(res.value.hour);
currentTime = currentTime.minutes(res.value.minute);
currentTime = currentTime.seconds(res.value.second);
that.date2 = currentTime;
that.$container.find('.time2 .timecont>span').html(res.str)
}
})
}
},
initCallback() {
this.on('confirm', this.onConfirm);
},
addTargetEvent() {
clickFunc=(e)=>{
if (e.target == this.$targetDom[0]) {
this.changeShowStatus();
} else if (!$(e.target).parents('.xndatepicker')[0] || ($(e.target).parents('.xndatepicker')[0].id != this.id)) {
this.changeShowStatus(true);
}
}
this.removeClickEvent=()=>{
document.removeEventListener('click', clickFunc, true)//捕获阶段
}
document.addEventListener('click', clickFunc, true)//捕获阶段
},
changeShowStatus(hide) {
if (this.show || hide) {
this.show = true;
this.$container.slideUp(100);
} else {
this.$container.css({display:'block',opacity:'0'})
this.resetCurrentTime();
this.$container.animate({'opacity':1},200);
}
this.show = !this.show;
},
addPosEvent: function () {
var that = this;
window.addEventListener("scroll", function () {
that.setPosition();
})
window.addEventListener("resize", function () {
that.setPosition();
})
},
setPosition: function () {
if (!this.$container[0]) {
return;
}
var wwidth = document.documentElement.clientWidth;
var wheight = document.documentElement.clientHeight;
var curcolordom = this.$targetDom[0]
var top = targetTop = curcolordom.getBoundingClientRect().top;
var left = targetLeft = curcolordom.getBoundingClientRect().left;
var targetWidth = this.$targetDom.outerWidth();
var targetHeight = this.$targetDom.outerHeight();
var domwidth = this.$container.outerWidth();
var domheight = this.$container.outerHeight();
top=top+targetHeight+10;
var trangletop=-6;
var trangleleft=left+20;
var borderWidth="1px 0 0 1px"
if(top+domheight>wheight){
top=targetTop-domheight-10;
trangletop=domheight-7;
borderWidth="0 1px 1px 0"
}
if(top<0){
top=0;
}
if(left+domwidth>wwidth){
left=targetLeft+targetWidth-domwidth;
trangleleft=domwidth-60;
}
if(left<0){
left=0
}
this.$container[0].style.top = top + "px";
this.$container[0].style.left = left + "px";
this.$container.find('.xntriangle')[0].style.left = trangleleft + "px";
this.$container.find('.xntriangle')[0].style.top = trangletop + "px";
this.$container.find('.xntriangle')[0].style.borderWidth = borderWidth;
}
}
window.XNDatepicker = XNDatepicker;
})(window, jQuery)
