135 |
zaneData是一个完全由原生javascript封装的PC端日历插件，不依赖任何第三方插件，功能全面，使用简单.
136 |
137 |
使用方式
138 |
浏览器端使用
139 |
140 | <!-- 引入相应的js和css -->
141 | <link href="./dist/zane-calendar.min.css">
142 | <script src="./dist/zane-calendar.min.js"></script>
143 |
144 | <!-- 需要加时间插件的输入框 -->
145 | <input type="" name="" id="zane-calendar">
146 |
147 | 初始化
148 | zaneDate({
149 | elem:'#zane-calendar',
150 | })
151 |
152 |
Webpack 使用
153 |
154 | <!-- 安装依赖 -->
155 | npm install zane-calendar --save-dev
156 |
157 | const zaneDate = require('zane-calendar') 或
158 | import zaneDate from 'zane-calendar'
159 |
160 | <!-- 需要加时间插件的输入框 -->
161 | <input type="" name="" id="zane-calendar">
162 |
163 | 初始化
164 | zaneDate({
165 | elem:'#zane-calendar',
166 | })
167 |
168 |
169 |
所有参数说明(组合随意)
170 |
171 | {
172 | elem:'#zane-calendar', 控件的dom原生 注意：仅限制于id选择器（必填参，其他参数皆为可选参）
173 | type:'day', 可选类型 day year month time doubleday doubleyear doublemonth doubletime
174 | lang:'cn', 可选择语言类型 cn , en
175 | width:280, 插件宽度配置 250 <= X <= 500
176 | height:300, 插件高度配置 250 <= X <= 350
177 | behindTop:10, 插件与输入框的距离
178 | format:'yyyy-MM-dd HH:mm:ss', 时间格式化
179 | begintime:'', 开始时间 （单选择器默认选择此项）
180 | endtime:'', 结束时间 （double选择器需要）
181 | min:'', 可选取时间最小范围 1900-10-01
182 | max: '', 可选取时间最大范围 2099-12-31
183 | position:'fixed', 定位方式 暂时只支持 fixed
184 | event:'click', 事件方式 暂时只支持 click
185 | zindex:100, z-index值
186 | showtime:true, 是否显示选择时间
187 | showclean:true, 是否显示清除按钮
188 | shownow:true, 是否显示当前按钮
189 | showsubmit:true, 是否显示提交按钮
190 | haveBotBtns:true, 是否有底部按钮列表
191 | mounted:()=>{}, 插件加载完成之后调用
192 | change:(fulltime,begintime,endtime)=>{}, 时间变更之后调用
193 | done:(fulltime,begintime,endtime)=>{}, 选择完成之后调用
194 | }
195 |
196 |
承载元素
197 |
198 |
199 |
INPUT框:
200 |
代码
201 |
zaneDate({
202 | elem:'#demo20',
203 | showtime:false,
204 | })
205 |
206 |
207 |
DIV框: 我是div框
208 |
代码
209 |
zaneDate({
210 | elem:'#demo19',
211 | showtime:false,
212 | begintime:'2018-01-01',
213 | })
214 |
215 |
216 |
217 |
绝对定位
218 |
显示绝对定位日期
219 |
220 |
221 |
fixed绝对定位:
222 |
223 |
代码
224 |
zaneDate({
225 | elem:'#demo28',
226 | type:'doubleday',
227 | format:'yyyy-MM-dd HH:mm:ss',
228 | showtime:true,
229 | })
230 |
231 |
232 |
绝对定位中的absolute定位:
233 |
234 |
代码
235 |
zaneDate({
236 | elem:'#demo29',
237 | })
238 |
239 |
x
240 |
241 |
242 |
中文版案例 (以下所有功能均适用于英文版)
243 |
244 |
245 |
完整版:
246 |
247 |
代码
248 |
zaneDate({
249 | elem:'#demo3',
250 | begintime:'2018-01-01 12:12:12',
251 | format:'yyyy-MM-dd HH:mm:ss',
252 | showtime:true
253 | })
254 |
255 |
256 |
选择年:
257 |
258 |
代码
259 |
zaneDate({
260 | elem:'#demo4',
261 | type:'year'
262 | })
263 |
264 |
265 |
266 |
267 |
选择月:
268 |
269 |
代码
270 |
zaneDate({
271 | elem:'#demo5',
272 | type:'month'
273 | })
274 |
275 |
276 |
选择时间:
277 |
278 |
代码
279 |
zaneDate({
280 | elem:'#demo6',
281 | type:'time'
282 | })
283 |
284 |
285 |
286 |
287 |
选择时间(只选择时和分):
288 |
289 |
代码
290 |
zaneDate({
291 | elem:'#demo56',
292 | type:'time',
293 | showsecond:false,
294 | })
295 |
296 |
297 |
改变宽度:
298 |
代码
299 |
zaneDate({
300 | elem:'#demo7',
301 | width:350,
302 | })
303 |
304 |
305 |
306 |
307 |
格式化:
308 |
代码
309 |
zaneDate({
310 | elem:'#demo8',
311 | format:'yyyy年MM月dd日 HH时mm分ss秒',
312 | showtime:true
313 | })
314 |
315 |
316 |
初始默认值:
317 |
代码
318 |
zaneDate({
319 | elem:'#demo9',
320 | begintime:'2018-01-01',
321 | })
322 |
323 |
324 |
325 |
326 |
时间范围min,max:
327 |
代码
328 |
zaneDate({
329 | elem:'#demo10',
330 | min:'2018-06-01',
331 | max:'2019-01-01'
332 | })
333 |
334 |
335 |
不显示时分秒:
336 |
代码
337 |
zaneDate({
338 | elem:'#demo11',
339 | showtime:false
340 | })
341 |
342 |
343 |
344 |
345 |
不显示清除按钮:
346 |
代码
347 |
zaneDate({
348 | elem:'#demo12',
349 | showclean:false
350 | })
351 |
352 |
353 |
不显示今天按钮:
354 |
代码
355 |
zaneDate({
356 | elem:'#demo13',
357 | shownow:false
358 | })
359 |
360 |
361 |
362 |
363 |
不显示确定按钮:
364 |
代码
365 |
zaneDate({
366 | elem:'#demo14',
367 | showsubmit:false
368 | })
369 |
370 |
371 |
不显所有按钮:
372 |
代码
373 |
zaneDate({
374 | elem:'#demo15',
375 | format:'yyyy-MM-dd',
376 | showtime:false,
377 | haveBotBtns:false
378 | })
379 |
380 |
381 |
382 |
383 |
初始化回调:
384 |
代码
385 |
zaneDate({
386 | elem:'#demo16',
387 | mounted:function(){
388 | document.getElementById('demo16').value="初始化完成！"
389 | }
390 | })
391 |
392 |
393 |
改变值回调:
394 |
代码
395 |
zaneDate({
396 | elem:'#demo17',
397 | change:function(fulltime,begintime,endtime){
398 | alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
399 | }
400 | })
401 |
402 |
403 |
404 |
405 |
完成回调:
406 |
代码
407 |
zaneDate({
408 | elem:'#demo18',
409 | done:function(fulltime,begintime,endtime){
410 | alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
411 | }
412 | })
413 |
414 |
415 |
double完成回调:
416 |
代码
417 |
zaneDate({
418 | elem:'#demo27',
419 | type:'doubleday',
420 | done:function(fulltime,begintime,endtime){
421 | alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
422 | }
423 | })
424 |
425 |
426 |
427 |
428 |
z-index值:
429 |
430 |
代码
431 |
zaneDate({
432 | elem:'#demo26',
433 | zindex:500
434 | })
435 |
436 |
437 |
双选择器案例
438 |
439 |
440 |
doubleday:
441 |
442 |
代码
443 |
zaneDate({
444 | elem:'#demo21',
445 | begintime:'2017-10-15',
446 | endtime:'2017-10-25',
447 | type:'doubleday',
448 | })
449 |
450 |
451 |
doubleyear:
452 |
453 |
代码
454 |
zaneDate({
455 | elem:'#demo22',
456 | begintime:'2020',
457 | endtime:'2025',
458 | type:'doubleyear',
459 | })
460 |
461 |
462 |
463 |
464 |
doublemonth:
465 |
466 |
代码
467 |
zaneDate({
468 | elem:'#demo23',
469 | begintime:'2',
470 | endtime:'5',
471 | type:'doublemonth',
472 | })
473 |
474 |
475 |
doubletime:
476 |
477 |
代码
478 |
zaneDate({
479 | elem:'#demo24',
480 | begintime:'12:10:10',
481 | endtime:'15:16:16',
482 | type:'doubletime',
483 | })
484 |
485 |
486 |
487 |
488 |
doubleday支持时分秒:
489 |
490 |
代码
491 |
zaneDate({
492 | elem:'#demo25',
493 | format:'yyyy-MM-dd HH:mm:ss',
494 | type:'doubleday',
495 | begintime:'2017-09-20 12:10:10',
496 | endtime:'2017-10-01 15:16:16',
497 | showtime:true
498 | })
499 |
500 |
501 |
doubletime 只选择时分:
502 |
503 |
代码
504 |
zaneDate({
505 | elem:'#demo24',
506 | begintime:'12:10',
507 | endtime:'15:16',
508 | type:'doubletime',
509 | showsecond:false
510 | })
511 |
512 |
513 |
英文版本案例
514 |
515 |
516 |
完整版:
517 |
518 |
代码
519 |
zaneDate({
520 | elem:'#demo30',
521 | lang:'cn',
522 | begintime:'2018-01-01 12:12:12',
523 | format:'yyyy-MM-dd HH:mm:ss',
524 | showtime:true
525 | })
526 |
527 |
528 |
doubleday支持时分秒:
529 |
530 |
代码
531 |
zaneDate({
532 | elem:'#demo31',
533 | lang:'en',
534 | format:'yyyy-MM-dd HH:mm:ss',
535 | type:'doubleday',
536 | begintime:'2017-09-20 12:10:10',
537 | endtime:'2017-10-01 15:16:16',
538 | showtime:true,
539 | done:function(fulltime,begintime,endtime){
540 | alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
541 | }
542 | })
543 |
544 |
545 |
12?this.getHours()-12:this.getHours(),"m+":this.getMinutes(),"s+":this.getSeconds(),"q+":Math.floor((this.getMonth()+3)/3),S:this.getMilliseconds()};/(y+)/.test(t)&&(t=t.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length)));for(var a in e)new RegExp("("+a+")").test(t)&&(t=t.replace(RegExp.$1,1==RegExp.$1.length?e[a]:("00"+e[a]).substr((""+e[a]).length)));return t});var a=document,i="querySelector",n="querySelectorAll",o=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,e),this.config={elem:"#zane-calendar",type:"day",position:"fixed",lang:"cn",width:280,format:"yyyy-MM-dd",value:"",min:"",max:"",event:"click",showtime:!1,showclean:!0,shownow:!0,showsubmit:!0,haveBotBtns:!0,calendarName:"",isDouble:!1,mounted:function(){},change:function(){},done:function(){}},this.config=this.extend(this.config,t),isNaN(new Date(this.config.value))&&(this.config.value=""),isNaN(new Date(this.config.min))&&(this.config.min=""),isNaN(new Date(this.config.max))&&(this.config.max=""),this.obj={input:a[i](this.config.elem),calendar:null,id:"#zane-calendar-"+this.config.calendarName,$obj:null,fulldatas:{},$noDoubleObj:null,isDoubleOne:!1,handleType:"date",initVal:"",behindTop:10,calendarHeight:307,totalYear:18,cn:{weeks:["日","一","二","三","四","五","六"],time:["时","分","秒"],timeTips:"选择时间",startTime:"开始时间",endTime:"结束时间",dateTips:"返回日期",month:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],tools:{confirm:"确定",clear:"清空",now:"现在"}},en:{weeks:["Su","Mo","Tu","We","Th","Fr","Sa"],time:["Hours","Minutes","Seconds"],timeTips:"Select Time",startTime:"Start Time",endTime:"End Time",dateTips:"Select Date",month:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tools:{confirm:"Confirm",clear:"Clear",now:"Now"}}},this.vision="1.2.0",this.auther="zane",this.obj.lang=this.obj[this.config.lang],"year"!=this.config.type&&"month"!=this.config.type||(this.config.haveBotBtns=!1),"time"==this.config.type&&(this.config.showtime=!1),this.init()}return _createClass(e,[{key:"init",value:function(){var e=this;this.on(this.obj.input,this.config.event,function(o){if(o.preventDefault(),o.stopPropagation(),e.obj.calendar)e.elemEventPoint(o);else{if(e.obj.isDoubleOne=-1!=e.config.calendarName.indexOf("DOUBLE"),e.obj.isDoubleOne){var s=e.config.calendarName.replace(/DOUBLE/,"");e.obj.$noDoubleObj=t[s],t[s].obj.$noDoubleObj=e}var l=e.objHTML(),c=a.createElement("div");switch(c.innerHTML=l,a.body.appendChild(c),e.$obj=a[i](e.obj.id),e.config.type){case"day":e.judgeCalendarRender("day",e.config.value);break;case"year":e.getYearHtml();break;case"month":e.getMonthHtml();break;case"time":e.getTimeHtml()}e.elemEventPoint(o),e.documentClick(),e.calendarClick()}e.obj.initVal=e.obj.input.value;var h=a[n](".zane-calendar");e.forEach(h,function(t,a){("#"+a.getAttribute("id")).replace(/DOUBLE/,"")!==e.obj.id.replace(/DOUBLE/,"")&&(a.style.display="none")})}),this.config.mounted&&this.config.mounted()}},{key:"objHTML",value:function(t){return'\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\t\n\t\t\t\t\t\t\t
\t\n\t\t\t\t\t\t\t
\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.timeTips+'
\n\t\t\t\t\t\t\t
\t\n\t\t\t\t \t\t\t
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.tools.clear+'
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.tools.now+'
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.tools.confirm+"
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
';return"cn"==this.config.lang?e+='\n\t\t\t\t'+t.year+'年 \n\t\t\t\t'+t.month+"月 \n\t\t\t
":e+='\n\t\t\t\t'+this.weekToEn(t.month)+' \n\t\t\t\t'+t.year+" \n\t\t\t
",e+='
'}},{key:"mainCheckDayHTML",value:function(t){for(var e='\n\t\t\n\t\t\t',a=0;a<7;a++)e+=""+this.obj.lang.weeks[a]+" ";e+=" ";for(var i=0,n=t.datalist.length;inew Date(this.config.max).getTime())&&(o+=" calendar-disabled"),e+=0==i?''+t.datalist[i].day+" ":i==n-1?''+t.datalist[i].day+" '+t.datalist[i].day+" ":''+t.datalist[i].day+" "}return e+="
\n\t\t\n\t\t\t'+t.firstYear+("cn"==this.config.lang?"年":"")+" -\n\t\t\t"+t.lastYear+("cn"==this.config.lang?"年":"")+' \n\t\t
\n\t\t
'}},{key:"mainCheckYearHTML",value:function(t){for(var e='\n\t\t\t
',a=0,i=t.datalist.length;a'+t.datalist[a].year+("cn"==this.config.lang?"年":"")+" ":a==i-1?''+t.datalist[a].year+("cn"==this.config.lang?"年":"")+" ":(a+1)%3==0?''+t.datalist[a].year+("cn"==this.config.lang?"年":"")+" ":''+t.datalist[a].year+("cn"==this.config.lang?"年":"")+" "}return e+="
\n\t\t
\n\t\t\n\t\t\t'+t.year+'年 \n\t\t
\n\t\t
'}},{key:"mainCheckMonthHTML",value:function(t){for(var e='\n\t\t\t
',a=0,i=t.datalist.length;a'+t.datalist[a]+" ":a==i-1?''+t.datalist[a]+" ":(a+1)%3==0?''+t.datalist[a]+" ":''+t.datalist[a]+" "}return e+="
\n\t\t
'+this.obj.lang.timeTips+"
"}},{key:"mainCheckTimeHTML",value:function(t){for(var e=''+this.obj.lang.time[0]+" "+this.obj.lang.time[1]+" "+this.obj.lang.time[2]+' \n\t\t\t\t
',a=0,i=t.hours.length;a'+t.hours[a]+""}e+=' ';for(var o=0,s=t.minutes.length;o'+t.minutes[o]+""}e+=' ';for(var c=0,h=t.seconds.length;c'+t.seconds[c]+""}return e+=" '+this.obj.lang.dateTips+"
":t+=''+this.obj.lang.timeTips+"
",t}},{key:"elemEventPoint",value:function(t){this.obj.calendar=this.$obj;var e=a.documentElement.clientWidth,i=a.documentElement.clientHeight,n=a.documentElement.scrollTop,o=t.target.offsetTop,s=t.target.offsetLeft,l=t.target.offsetHeight,c=i-(o+l+this.obj.behindTop-n),h=e-s-this.config.width;this.obj.calendar.style.display="block",this.obj.calendarHeight=this.$obj.offsetHeight,this.obj.isDoubleOne&&h>=this.config.width?this.obj.calendar.style.left=s+this.config.width+"px":this.obj.calendar.style.left=s+"px",c>this.obj.calendarHeight?this.config.isDouble&&this.obj.isDoubleOne&&h=12?(n+=1,o=1):o+=1:this.config.isDouble&&!this.obj.isDoubleOne&&"pre"==e&&(o<=1?(n-=1,o=12):o-=1),o=(o+"").length<2?"0"+o:o,s=(s+"").length<2?"0"+s:s,l=(l+"").length<2?"0"+l:l,c=(c+"").length<2?"0"+c:c,h=(h+"").length<2?"0"+h:h;var r=new Date(n,o,0).getDate(),d=new Date(n+"/"+o+"/1").getDay(),u=(new Date(n+"/"+o+"/"+r).getDay(),null);if(d>0){var f=new Date(n,o-1,0).getDate(),m=n,b=o-1;0===b&&(m=n-1,b=12);for(var y=0,g=d;y1&&void 0!==arguments[1])||arguments[1],n=null;if(t&&-1!=t.indexOf("|")){var o=t.split("|"),s=null,l=null;e?(s=new Date(o[0]).Format(this.config.format),l=new Date(o[1]).Format(this.config.format)):(s=o[0],l=o[1]),n=s+" - "+l}else n=e?new Date(t).Format(this.config.format):t;"INPUT"!==this.obj.input.nodeName?this.obj.input.textContent=n:this.obj.input.value=n,this.$obj.style.display="none",this.obj.isDoubleOne&&(a[i](this.obj.$noDoubleObj.obj.id).style.display="none"),this.config.done&&this.config.done(n),this.obj.initVal!=n&&this.config.change&&this.config.change(n)}},{key:"judgeCalendarRender",value:function(t,e,a,n){var o=void 0,s=void 0,l=void 0;switch(t){case"day":this.obj.handleType="day";var c=this.getTimeDates(e,n);this.obj.fulldatas=c,this.compareSize(a,n),s=this.topCheckDayHTML(c),o=this.mainCheckDayHTML(c),this.renderCommonHtml("day",s,o),this.countHeight(".main-check-day",7),this.getDay();break;case"year":this.obj.handleType="year",this.compareSize(a,n),o=this.mainCheckYearHTML(e),s=this.topCheckYearHTML(e),this.renderCommonHtml("year",s,o),this.countHeight(".main-check-year",6),this.getYear();break;case"month":this.obj.handleType="month",o=this.mainCheckMonthHTML(e),s=this.topCheckMonthHTML(e),this.renderCommonHtml("month",s,o),this.countHeight(".main-check-month",4),this.getMonth();break;case"time":this.obj.handleType="time",o=this.mainCheckTimeHTML(e),s=this.topCheckTimeHTML(),l=this.bottomCheckTimeHTML(),this.renderCommonHtml("time",s,o,l);var h=this.$obj[i]("ul.hour")[i]("li.active").offsetTop,r=this.$obj[i]("ul.minute")[i]("li.active").offsetTop,d=this.$obj[i]("ul.second")[i]("li.active").offsetTop;this.$obj[i]("ul.hour").scrollTop=h-150,this.$obj[i]("ul.minute").scrollTop=r-150,this.$obj[i]("ul.second").scrollTop=d-150,this.selectTime()}}},{key:"renderCommonHtml",value:function(t,e,a,o){var s=!(arguments.length>4&&void 0!==arguments[4])||arguments[4];"time"!=t&&s||(this.$obj[i](".btn-select-time").innerHTML=o),s&&(this.$obj[i](".top-check-"+t).innerHTML=e,this.$obj[i](".main-check-"+t).innerHTML=a),this.showOrHide(this.$obj[n](".common-top"),"hide"),this.showOrHide(this.$obj[n](".common-main"),"hide"),this.$obj[i](".main-check-"+t).style.display="block",this.$obj[i](".top-check-"+t).style.display="block"}},{key:"compareSize",value:function(t,e){if(t){var a=this.obj.fulldatas,i=this.obj.$noDoubleObj;this.config.isDouble&&a&&i&&(i=i.obj.fulldatas,this.obj.isDoubleOne?this.getDoubleTime({prev:i,next:a,clickType:e}):this.getDoubleTime({prev:a,next:i,clickType:e}))}}},{key:"getDoubleTime",value:function(t){var e=void 0,a=void 0,i=void 0;switch(this.config.type){case"day":a=t.prev.year+"/"+t.prev.month+"/"+t.prev.today,e=t.next.year+"/"+t.next.month+"/"+t.next.today,new Date(a).getTime()>=(i=new Date(e).getTime())-864e5&&this.obj.$noDoubleObj.judgeCalendarRender("day",i,!1,t.clickType);break;case"year":""+t.prev.year>=(i=""+t.next.year)&&this.obj.$noDoubleObj.getYearHtml(i,!1,t.clickType)}}},{key:"calendarClick",value:function(){this.on(this.obj.calendar,"click",function(t){t.preventDefault(),t.stopPropagation()})}},{key:"extend",value:function(t,e){return Object.assign(t,e)}},{key:"hasClass",value:function(t,e){return t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))}},{key:"addClass",value:function(t,e){this.hasClass(t,e)||(t.className+=" "+e)}},{key:"removeClass",value:function(t,e){if(this.hasClass(t,e)){var a=new RegExp("(\\s|^)"+e+"(\\s|$)");t.className=t.className.replace(a," ")}}},{key:"forEach",value:function(t,e){var a=void 0;if("function"!=typeof e)return this;if(t=t||[],"[object Object]"==Object.prototype.toString.call(t)){for(a in t)if(e.call(t[a],a,t[a]))break}else if("[object NodeList]"==Object.prototype.toString.call(t)||"[object Array]"==Object.prototype.toString.call(t))for(a=0;a0&&void 0!==arguments[0]?arguments[0]:{},n=e.elem.substring(1);n=n.replace(/[_-]/g,"").toUpperCase(),e.calendarName=a&&a.double?n+a.double:n,e.width&&(e.width=e.width<260?260:e.width,e.width=e.width>500?500:e.width);var s=Object.assign(i(e),a);t[e.calendarName]=new o(s)}function i(t,e){e=e||{};for(var a in t)t.hasOwnProperty(a)&&("object"===_typeof(t[a])?(e[a]="[object Array]"===Object.prototype.toString.call(t[a])?[]:{},i(t[a],e[a])):e[a]=t[a]);return e}e.type=e.type||"day",-1!=e.type.indexOf("double")?(e.type=e.type.replace(/double/,""),a({showclean:!1,shownow:!1,showsubmit:!1,isDouble:!0}),a({shownow:!1,showtime:!1,isDouble:!0,double:"DOUBLE"})):a()};return e||(t.zaneDate=s),s});
--------------------------------------------------------------------------------
/dist/zane-calendar.min.js:
--------------------------------------------------------------------------------
1 | "use strict";var _createClass=function(){function a(t,e){for(var i=0;i\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\t\n\t\t\t\t\t\t\t
\t\n\t\t\t\t\t\t\t
\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.timeTips+'
\n\t\t\t\t\t\t\t
\t\n\t\t\t\t \t\t\t
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.tools.clear+'
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.tools.now+'
\n\t\t\t\t\t\t\t\t
'+this.obj.lang.tools.confirm+"
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
';return"cn"==this.config.lang?e+='\n\t\t\t\t'+t.year+'年 \n\t\t\t\t'+t.month+"月 \n\t\t\t
":e+='\n\t\t\t\t'+this.weekToEn(t.month)+' \n\t\t\t\t'+t.year+" \n\t\t\t
",e+='
'}},{key:"mainCheckDayHTML",value:function(t){for(var e='\n\t\t\n\t\t\t',i=0;i<7;i++)e+=""+this.obj.lang.weeks[i]+" ";e+=" ";for(var a=0,n=t.datalist.length;anew Date(this.config.max).getTime())&&(o+=" calendar-disabled"),e+=0==a?''+t.datalist[a].day+" '+t.datalist[a].day+" '+t.datalist[a].day+" ":''+t.datalist[a].day+"
\n\t\t\n\t\t\t'+t.firstYear+("cn"==this.config.lang?"年":"")+" -\n\t\t\t"+t.lastYear+("cn"==this.config.lang?"年":"")+' \n\t\t
\n\t\t
'}},{key:"mainCheckYearHTML",value:function(t){for(var e='\n\t\t\t
',i=0,a=t.datalist.length;i'+t.datalist[i].year+" '+t.datalist[i].year+" '+t.datalist[i].year+" ":''+t.datalist[i].year+"
\n\t\t
\n\t\t\n\t\t\t'+t.year+'年 \n\t\t
\n\t\t
'}},{key:"mainCheckMonthHTML",value:function(t){for(var e='\n\t\t\t
',i=0,a=t.datalist.length;i'+t.datalist[i]+" '+t.datalist[i]+" '+t.datalist[i]+" ":''+t.datalist[i]+"
\n\t\t
'+this.obj.lang.timeTips+"
"}},{key:"mainCheckTimeHTML",value:function(t){for(var e='\n\t\t\t\t\t\t'+this.obj.lang.time[0]+" \n\t\t\t\t\t\t"+this.obj.lang.time[1]+" \n\t\t\t\t\t\t"+(this.config.showsecond?""+this.obj.lang.time[2]+" ":"")+'\n\t\t\t\t\t \n\t\t\t\t
',i=0,a=t.hours.length;i'+t.hours[i]+""}e+=' ';for(var o=0,s=t.minutes.length;o'+t.minutes[o]+""}if(this.config.showsecond){e+=' ';for(var c=0,h=t.seconds.length;c'+t.seconds[c]+""}}return e+=" '+this.obj.lang.dateTips+"
":t+=''+this.obj.lang.timeTips+"
",t}},{key:"elemEventPoint",value:function(t){var e=t.srcElement||t.target;this.obj.calendar=this.$obj;var i=e.getBoundingClientRect(),a=i.left,n=i.top,o=m.documentElement.clientWidth,s=m.documentElement.clientHeight,l=document.documentElement.scrollTop||u.pageYOffset||document.body.scrollTop,c=t.target.offsetHeight,h=s-(n+c+this.config.behindTop),r=o-a-this.config.width,d=this.$obj.offsetHeight;this.obj.calendar.style.display="block",this.obj.isDoubleOne&&r>=this.config.width?this.obj.calendar.style.left=a+this.config.width+"px":this.obj.calendar.style.left=a+"px",d12?this.getHours()-12:this.getHours(), //小时
32 | "H+": this.getHours(),
33 | "m+": this.getMinutes(), //分
34 | "s+": this.getSeconds(), //秒
35 | "q+": Math.floor((this.getMonth() + 3) / 3), //季度
36 | "S": this.getMilliseconds() //毫秒
37 | };
38 | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
39 | for (var k in o)
40 | if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
41 | return fmt;
42 | }
43 | };
44 |
45 | let doc = document,
46 | query = 'querySelector',
47 | quall = 'querySelectorAll';
48 |
49 | // 日期插件
50 | class calendar{
51 | constructor(json={}){
52 | this.config={
53 | //控件的dom原生仅限制于id
54 | elem:'#zane-calendar',
55 | //可选 day year month time doubleday doubleyear doublemonth doubletime
56 | type:'day',
57 | //absolute , fixed
58 | position:'fixed',
59 | //cn , en
60 | lang:'cn',
61 | // 宽度
62 | width:250,
63 | // 插件高度配置
64 | height:280,
65 | //插件于输入框的高度
66 | behindTop:10,
67 | // 格式化
68 | format:'yyyy/MM/dd', //'yyyy-MM-dd HH:mm:ss'
69 | // 初始默认值
70 | value:'',
71 | // 可选取时间最小范围
72 | min:'', //'1900-10-01',
73 | // 可选取时间最大范围
74 | max: '', //'2099-12-31',
75 | //事件方式 click
76 | event:'click',
77 | // z-index的值
78 | zindex:100,
79 | //是否显示选择时间
80 | showtime:false,
81 | //是否显示清除按钮
82 | showclean:true,
83 | //是否显示当前按钮
84 | shownow:true,
85 | //是否显示提交按钮
86 | showsubmit:true,
87 | // 是否有底部按钮列表
88 | haveBotBtns:true,
89 | // type='time'时是否显示秒单位
90 | showsecond:true,
91 |
92 | calendarName:'',
93 | isDouble:false,
94 | // 插件加载完成之后调用
95 | mounted:()=>{},
96 | //时间变更之后调用
97 | change:()=>{},
98 | //选择完成之后调用
99 | done:()=>{},
100 | }
101 | this.config = this.extend(this.config,json);
102 | //校验时间格式
103 | if(!this.config.value)this.config.value = ''
104 | if(!this.config.min)this.config.min = ''
105 | if(!this.config.max)this.config.max = ''
106 |
107 | // 初始化
108 | this.init();
109 | }
110 |
111 | // 生成对象obj
112 | generateCalendarObj(){
113 | this.obj={
114 | input:doc[query](this.config.elem),
115 | calendar:null,
116 | id:`#zane-calendar-${this.config.calendarName}`,
117 | $obj:null,
118 | fulldatas:{},
119 | $noDoubleObj:null,
120 | isDoubleOne:false,
121 | handleType:'date',
122 | initVal:'',//每次进来的初始值
123 | // 选择年时展示的数量
124 | totalYear:18,
125 | cn:{
126 | weeks: ['日', '一', '二', '三', '四', '五', '六'],
127 | time: ['时', '分', '秒'],
128 | timeTips: '选择时间',
129 | startTime: '开始时间',
130 | endTime: '结束时间',
131 | dateTips: '返回日期',
132 | month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
133 | tools: {
134 | confirm: '确定',
135 | clear: '清空',
136 | now: '现在'
137 | }
138 | },
139 | en:{
140 | weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
141 | time: ['Hours', 'Minutes', 'Seconds'],
142 | timeTips: 'Select Time',
143 | startTime: 'Start Time',
144 | endTime: 'End Time',
145 | dateTips: 'Select Date',
146 | month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
147 | tools: {
148 | confirm: 'Confirm',
149 | clear: 'Clear',
150 | now: 'Now'
151 | }
152 | }
153 | }
154 |
155 | this.vision = '2.0.9'
156 | this.auther = 'zane'
157 |
158 | this.obj.lang = this.obj[this.config.lang];
159 |
160 | if(this.config.type == 'year' || this.config.type == 'month'){
161 | this.config.haveBotBtns = false;
162 | }
163 |
164 | if(this.config.type == 'time'){
165 | this.config.showtime =false;
166 | }
167 |
168 | // double 处理
169 | if(this.config.isDouble){
170 | this.obj.input.nodeName !== 'INPUT'?
171 | this.obj.input.textContent = this.config.doublevalue :
172 | this.obj.input.value = this.config.doublevalue;
173 | }else if(!this.config.isDouble){
174 | this.obj.input.nodeName !== 'INPUT'?
175 | this.obj.input.textContent = this.config.value :
176 | this.obj.input.value = this.config.value;
177 | }
178 | }
179 |
180 | init(){
181 | this.generateCalendarObj()
182 | this.on(this.obj.input,this.config.event, (e)=>{
183 | e.preventDefault();
184 | e.stopPropagation();
185 |
186 | // 隐藏其他时间插件框
187 | let objs = doc[quall]('.zane-calendar');
188 | this.forEach(objs,(index,item)=>{
189 | let itemId = item.getAttribute('id')
190 | if (('#' + itemId).replace(/DOUBLE/,'') !== this.obj.id.replace(/DOUBLE/,'') ){
191 | itemId = itemId.replace('zane-calendar-','')
192 | this.removeCalendar()
193 | }
194 | })
195 |
196 | let obj = doc[query](this.obj.id);
197 |
198 | if(obj){
199 | this.obj.calendar = obj;
200 | this.$obj = obj;
201 | };
202 |
203 |
204 | // double 赋值
205 | this.obj.isDoubleOne = this.config.calendarName.indexOf('DOUBLE') != -1?true:false;
206 | if(this.obj.isDoubleOne ){
207 | let noDoubleObj = this.config.calendarName.replace(/DOUBLE/,'')
208 | this.obj.$noDoubleObj = window[noDoubleObj];
209 | window[noDoubleObj].obj.$noDoubleObj = this;
210 | };
211 |
212 | // 设置默认值
213 | let defaultValue,inpValue;
214 | defaultValue = this.obj.input.nodeName === 'INPUT'?this.obj.input.value.trim():this.obj.input.textContent.trim()
215 | if(defaultValue){
216 | // 中文处理
217 | defaultValue = defaultValue.replace(/[\u4e00-\u9fa5]+/g,function($a,$b){
218 | if($a=='年'||$a=='月'){
219 | return '/'
220 | }else if($a=='时'||$a=='分'){
221 | return ':'
222 | }else if($a=='秒'||$a=='日'){
223 | return ''
224 | }
225 | })
226 | if(this.config.isDouble){
227 | let arr = defaultValue.split('-')
228 | let begintime = arr[1].trim()
229 | let endtime = arr[0].trim()
230 | this.config.value = this.obj.isDoubleOne ? begintime : endtime
231 | this.config.begintime = endtime
232 | this.config.endtime = begintime
233 | }else{
234 | this.config.value = defaultValue
235 | }
236 |
237 | }
238 |
239 | // 过滤重复生成
240 | if (doc[query](this.obj.id)) return;
241 |
242 | // 获得年月日
243 | let html = this.objHTML();//生成时间选择器HTML
244 | var divElement = doc.createElement("div");
245 | divElement.innerHTML = html
246 | doc.body.appendChild(divElement)
247 |
248 | this.$obj = doc[query](this.obj.id);
249 |
250 | switch(this.config.type){
251 | case 'day':
252 | this.judgeCalendarRender('day',this.config.value)
253 | break;
254 | case 'year':
255 | this.getYearHtml(this.config.value);
256 | break;
257 | case 'month':
258 | this.getMonthHtml(this.config.value);
259 | break;
260 | case 'time':
261 | this.getTimeHtml(this.config.value);
262 | break;
263 | }
264 |
265 | //定位并显示选择器
266 | this.elemEventPoint(e);
267 | this.documentClick();
268 | this.calendarClick();
269 |
270 | this.obj.initVal = this.obj.input.value;
271 | });
272 | this.config.mounted&&this.config.mounted();
273 | }
274 |
275 | //生成时间选择器区域
276 | objHTML(json){
277 | let html =`
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
294 |
295 |
${this.obj.lang.timeTips}
296 |
297 |
298 |
${this.obj.lang.tools.clear}
301 |
${this.obj.lang.tools.now}
304 |
${this.obj.lang.tools.confirm}
307 |
308 |
309 |
310 |
`
317 | if (this.config.lang == 'cn'){
318 | html += `
319 | ${json.year}年
320 | ${json.month}月
321 |
`
322 | }else{
323 | html += `
324 | ${this.weekToEn(json.month)}
325 | ${json.year}
326 |
`
327 | }
328 | html +=`
`
329 | return html;
330 | }
331 |
332 | // day - main html 时间选择器选择日期块
333 | mainCheckDayHTML(json){
334 | let html =`
335 |
336 | `
337 | for (let j = 0,len = 7; j${this.obj.lang.weeks[j]}`
339 | }
340 | html +=` `
341 | for (let i = 0,len=json.datalist.length; i < len; i++) {
342 | let className = json.datalist[i].class||"";
343 | let sele_act = json.datalist[i].sele_act || '';
344 | if(json.datalist[i].day === parseInt(json.today)&&json.datalist[i].daytype==='now'){
345 | className += this.config.isDouble ? ` act_block` : ` active`
346 | }
347 | //如果超出min时间或者max时间的，给禁止选中样式
348 | if((this.config.min!='' && new Date(json.datalist[i].fullday).getTime()new Date(this.config.max).getTime())){
349 | className+=` calendar-disabled`
350 | }
351 | if(i == 0){
352 | html += `${json.datalist[i].day} ${json.datalist[i].day} ${json.datalist[i].day} `;
358 | }else{
359 | html += `${json.datalist[i].day}
372 |
373 | ${json.firstYear}${this.config.lang=='cn'?'年':''} -
374 | ${json.lastYear}${this.config.lang=='cn'?'年':''}
375 |
376 |
`
377 | return html;
378 | }
379 | // year - main html 时间选择器选择年份状态内容块
380 | mainCheckYearHTML(json){
381 | let html=`
382 |
`
383 | for (let i = 0,len=json.datalist.length; i < len; i++) {
384 | let className = json.datalist[i].class||"";
385 | if(json.datalist[i].year === json.nowyear){
386 | className+=` active`
387 | }
388 | if(i == 0){
389 | html+=`${json.datalist[i].year} ${json.datalist[i].year} ${json.datalist[i].year} `;
395 | }else{
396 | html+=`${json.datalist[i].year}
401 |
409 |
410 | ${json.year}年
411 |
412 |
`
413 | return html;
414 | }
415 | // month -main html 时间选择器选择月份状态内容块
416 | mainCheckMonthHTML(json){
417 | let html=`
418 |
`
419 | for (let i = 0,len=json.datalist.length; i < len; i++) {
420 | let className = json.datalist[i].class||"";
421 | if((i+1) === parseInt(json.nowmonth)){
422 | className+=` active`
423 | }
424 | if(i == 0){
425 | html+=`${json.datalist[i]} ${json.datalist[i]} ${json.datalist[i]} `;
431 | }else{
432 | html+=`${json.datalist[i]}
437 |
${this.obj.lang.timeTips}
`
444 | return html;
445 | }
446 | // time -main html 时间选择器选择时间状态内容块
447 | mainCheckTimeHTML(json){
448 | let html = `
449 | ${this.obj.lang.time[0]}
450 | ${this.obj.lang.time[1]}
451 | ${this.config.showsecond?''+this.obj.lang.time[2]+' ':''}
452 |
453 |
`
454 | for (let i = 0,len=json.hours.length; i < len; i++) {
455 | let className='';
456 | if(json.hours[i] == json.hour) className='active';
457 | html +=`${json.hours[i]} `
458 | }
459 | html+=` `
460 | for (let i = 0,len=json.minutes.length; i < len; i++) {
461 | let className='';
462 | if(json.minutes[i] == json.minute) className='active';
463 | html +=`${json.minutes[i]} `
464 | }
465 | if(this.config.showsecond){
466 | html+=` `
467 | for (let i = 0,len=json.seconds.length; i < len; i++) {
468 | let className='';
469 | if(json.seconds[i] == json.second) className='active';
470 | html +=`${json.seconds[i]} `
471 | }
472 | }
473 | html+=` ${this.obj.lang.dateTips}
`
482 | }else{
483 | html+= `${this.obj.lang.timeTips}
`
484 | }
485 | return html;
486 | }
487 |
488 | // 插件位置定位并显示
489 | elemEventPoint(e){
490 | let secElement = e.srcElement || e.target
491 | this.obj.calendar = this.$obj;
492 | let rectObject = secElement.getBoundingClientRect()
493 | let objOffsetLeft = rectObject.left
494 | let objOffsetTop = rectObject.top
495 | let winWidth = doc.documentElement.clientWidth
496 | let screenClientHeight = doc.documentElement.clientHeight
497 | let screenScrolTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
498 | let objOffsetHeight = e.target.offsetHeight
499 | let objBotton = screenClientHeight-(objOffsetTop+objOffsetHeight+this.config.behindTop)
500 | let betweenRight = winWidth-objOffsetLeft-this.config.width
501 | let calendHeight = this.$obj.offsetHeight
502 | this.obj.calendar.style.display = 'block';
503 |
504 | // 设置插件point位置
505 | if(this.obj.isDoubleOne&&betweenRight>=this.config.width){
506 | this.obj.calendar.style.left = objOffsetLeft+this.config.width+'px';
507 | }else{
508 | this.obj.calendar.style.left = objOffsetLeft+'px';
509 | };
510 | //double 处理
511 | if(objBotton > calendHeight){
512 | //插件在input框之下
513 | this.config.isDouble&&this.obj.isDoubleOne&&betweenRight 12){
538 | year = year + 1;
539 | month = 1;
540 | }
541 | }else if(this.config.isDouble&&!this.obj.isDoubleOne&&clickType=='pre'){
542 | if(month < 1){
543 | year = year - 1;
544 | month = 12;
545 | }
546 | }
547 | month = (month+'').length<2? '0'+month : month;
548 | toDate = (toDate+'').length<2? '0'+toDate : toDate;
549 | hour = (hour+'').length<2? '0'+hour : hour;
550 | minute = (minute+'').length<2? '0'+minute:minute;
551 | second = (second+'').length<2? '0'+second:second;
552 | // 计算当前这个月的天数
553 | let monTotalDay = new Date(year,month,0).getDate()
554 | // 计算第一天是周几
555 | let firstDayMeek = new Date(`${year}/${month}/1`).getDay()
556 | let lastDayMeek = new Date(`${year}/${month}/${monTotalDay}`).getDay()
557 | let preweek = null;
558 | let preday = null;
559 | // 计算需要补充的时间
560 | if(firstDayMeek>0){
561 | let preMonTotalDay = new Date(year,month-1,0).getDate()
562 | let preyear = year;
563 | let premonth = month-1;
564 | if(premonth === 0){
565 | preyear = year-1;
566 | premonth = 12;
567 | }
568 | for (var i = 0,len=firstDayMeek; i < len; i++) {
569 | let day = preMonTotalDay-i;
570 | premonth = (premonth+'').length<2?'0'+premonth:premonth;
571 | day = (day+'').length<2?'0'+day:day;
572 | let fullday = `${preyear}/${premonth}/${day}`;
573 | let sele_act = this.hasSelectAct(fullday, this.config.begintime, this.config.endtime) ? 'sele_act' : '';
574 |
575 | timeDatas.push({
576 | day:preMonTotalDay-i,
577 | week:len-1-i,
578 | class:'light',
579 | sele_act: sele_act,
580 | daytype:`pre`,
581 | fullday: fullday
582 | })
583 | }
584 | }
585 | timeDatas = timeDatas.reverse();
586 | for (let i = 0,len=monTotalDay; i < len; i++) {
587 | let weekday = (firstDayMeek+i)%7;
588 | let premonth = month;
589 | let day = i+1
590 | premonth = (premonth+'').length<2?'0'+premonth:premonth;
591 | day = (day+'').length<2?'0'+day:day;
592 | let fullday = `${year}/${premonth}/${day}`;
593 | let sele_act = this.hasSelectAct(fullday, this.config.begintime, this.config.endtime) ? 'sele_act' : '';
594 |
595 | timeDatas.push({
596 | day:i+1,
597 | week:weekday,
598 | daytype:`now`,
599 | sele_act: sele_act,
600 | fullday: fullday
601 | })
602 | if(i === len-1){
603 | preweek = weekday;
604 | preday = i+1;
605 | }
606 | }
607 |
608 | let totalLength = timeDatas.length;
609 | let haveNeedLength = 42-totalLength;
610 |
611 | let preyear = year;
612 | let premonth = parseInt(month)+1;
613 | if(premonth === 13){
614 | preyear = year+1;
615 | premonth = 1;
616 | }
617 |
618 | for (var i = 0; i < haveNeedLength; i++) {
619 | let weekday = (preweek+1+i)%7;
620 | let day = i+1;
621 | premonth = (premonth+'').length<2?'0'+premonth:premonth;
622 | day = (day+'').length<2?'0'+day:day;
623 | let fullday = `${preyear}/${premonth}/${day}`;
624 | let sele_act = this.hasSelectAct(fullday, this.config.begintime, this.config.endtime) ? 'sele_act' : '';
625 |
626 | timeDatas.push({
627 | day:i+1,
628 | week:weekday,
629 | class:'light',
630 | sele_act: sele_act,
631 | daytype:`next`,
632 | fullday: fullday
633 | })
634 | }
635 | setTimeout(()=>{if (!this.config.begintime && !this.config.endtime) this.setBeginEndTime(`${year}/${month}/${toDate}`);},1000);
636 | return {
637 | year:year,
638 | month:month,
639 | today:toDate,
640 | hour:hour,
641 | minute:minute,
642 | second:second,
643 | datalist:timeDatas
644 | }
645 | }
646 |
647 | hasSelectAct(nowTime,beginTime,endTime){
648 | let result = false;
649 | if (this.config.isDouble && this.config.begintime && this.config.endtime) {
650 | nowTime = typeof (nowTime) === 'number' ? nowTime : new Date(nowTime).getTime()
651 | beginTime = typeof (beginTime) === 'number' ? beginTime : new Date(beginTime.replace(/-/g, '/')).getTime();
652 | endTime = typeof (endTime) === 'number' ? endTime : new Date(endTime.replace(/-/g, '/')).getTime();
653 | if (nowTime >= beginTime && nowTime <= endTime) result = true;
654 | }
655 | return result;
656 | }
657 |
658 | // 选择上一月
659 | preMonth(year,month){
660 | month = month-1
661 | if(month == 0) {
662 | month = 12;
663 | year = year-1
664 | }
665 | let today = this.obj.fulldatas.today
666 | let totalday = new Date(year, month, 0).getDate()
667 | if (today > totalday) today = totalday
668 | let fulldate = `${year}/${month}/${today}`
669 | let isreset = this.config.isDouble&&this.obj.isDoubleOne?true:false
670 | this.setBeginEndTime(fulldate);
671 | this.judgeCalendarRender('day',fulldate,isreset,'pre')
672 | }
673 |
674 | // 选择下一月
675 | nextMonth(year,month){
676 | month = month+1
677 | if(month == 13) {
678 | month = 1;
679 | year = year+1
680 | }
681 | let today = this.obj.fulldatas.today
682 | let totalday = new Date(year, month, 0).getDate()
683 | if (today > totalday) today = totalday
684 | let fulldate = `${year}/${month}/${today}`
685 | let isreset = this.config.isDouble&&!this.obj.isDoubleOne?true:false
686 | this.setBeginEndTime(fulldate);
687 | this.judgeCalendarRender('day',fulldate,isreset,'next')
688 | }
689 |
690 | setBeginEndTime(dataTime){
691 | if (this.config.isDouble) {
692 | if (!this.obj.isDoubleOne) {
693 | this.config.begintime = dataTime;
694 | this.obj.$noDoubleObj.config.begintime = dataTime;
695 | } else {
696 | this.config.endtime = dataTime;
697 | this.obj.$noDoubleObj.config.endtime = dataTime;
698 | }
699 | }
700 | }
701 |
702 | // 获得年月日,如果showtime=true,日期加样式，如果为false,直接设置当前选择的日期
703 | getDay(){
704 | let _this=this;
705 | let objs = this.$obj
706 | [query]('.main-check-day')[quall]('td');
707 | // 绑定单击
708 | this.on(objs,'click',function(e){
709 | let node = e.target.nodeName=='SPAN'?e.target.parentNode:e.target
710 | if(!_this.hasClass(node,'calendar-disabled')){//有calendar-disabled样式的不赋予事件
711 | let dataTime = this.getAttribute('data-time');
712 | let arr = dataTime.split('/')
713 | let fulldatas = {
714 | year: arr[0],
715 | month: arr[1],
716 | today: arr[2],
717 | hour: _this.obj.fulldatas.hour,
718 | minute: _this.obj.fulldatas.minute,
719 | second: _this.obj.fulldatas.second
720 | }
721 | _this.setBeginEndTime(dataTime)
722 | if (_this.config.isDouble) {
723 | const result = _this.compareTimes('getDay', _this.obj.$noDoubleObj.obj.fulldatas, fulldatas);
724 | if (result) return;
725 | }
726 | _this.obj.fulldatas.year = arr[0]
727 | _this.obj.fulldatas.month = arr[1]
728 | _this.obj.fulldatas.today = arr[2]
729 | //选择具体日期添加样式
730 | _this.addOrRemoveClass(this);
731 | // double 处理
732 | if(!_this.config.showtime && !_this.config.isDouble){
733 | let value = `${_this.obj.fulldatas.year}/${_this.obj.fulldatas.month}/${_this.obj.fulldatas.today}`
734 | _this.getYearMonthAndDay(value,true)
735 | }
736 | }
737 | })
738 | // 绑定双击
739 | !this.config.isDouble&&this.on(objs,'dblclick',function(e){
740 | let node = e.target.nodeName=='SPAN'?e.target.parentNode:e.target
741 | if(e.type === 'dblclick'&&!_this.hasClass(node,'calendar-disabled')) _this.makeSureSelectTime();
742 | })
743 | }
744 |
745 | addOrRemoveClass(that){
746 | const _this = this;
747 | let objs = this.$obj[query]('.main-check-day')[quall]('td');
748 | if (_this.config.isDouble) {
749 | let otherobjs = _this.obj.$noDoubleObj.$obj[query]('.main-check-day')[quall]('td');
750 | _this.forEach(objs, (index, item) => {
751 | let newtime = item.getAttribute('data-time')
752 | let result = _this.hasSelectAct(newtime, _this.config.begintime, _this.config.endtime)
753 | if (that) _this.removeClass(item, 'act_block');
754 | if (result){
755 | if (!_this.hasClass(item, 'sele_act')) _this.addClass(item, 'sele_act');
756 | } else {
757 | _this.removeClass(item, 'sele_act')
758 | }
759 | })
760 | _this.forEach(otherobjs, (index, item) => {
761 | let newtime = item.getAttribute('data-time')
762 | let result = _this.hasSelectAct(newtime, _this.config.begintime, _this.config.endtime)
763 | if (result) {
764 | if (!_this.hasClass(item, 'sele_act')) _this.addClass(item, 'sele_act');
765 | }else{
766 | _this.removeClass(item, 'sele_act');
767 | }
768 | })
769 | if (that) _this.addClass(that, 'act_block');
770 | } else if (that){
771 | _this.forEach(objs, (index, item) => {
772 | _this.removeClass(item, 'active');
773 | })
774 | _this.addClass(that, 'active');
775 | }
776 | }
777 |
778 | compareTimes(type,preT,nextT){
779 | let preTimes, nextTimes, modelText;
780 | if (type === 'getDay'){
781 | preTimes = `${preT.year}/${preT.month}/${preT.today} ${preT.hour}:${preT.minute}:${preT.second}`;
782 | preTimes = new Date(preTimes).getTime();
783 | nextTimes = `${nextT.year}/${nextT.month}/${nextT.today} ${nextT.hour}:${nextT.minute}:${nextT.second}`;
784 | nextTimes = new Date(nextTimes).getTime();
785 | modelText = this.config.lang === 'cn' ? '结束时间必须大于开始时间！' : 'The end time must be greater than the start time.';
786 | } else if (type === 'getYear'){
787 | preTimes = preT.year;
788 | nextTimes = nextT.year;
789 | modelText = this.config.lang === 'cn' ? '结束年份必须大于开始年份！' : 'The end year must be greater than the beginning year.';
790 | } else if (type === 'getMonth'){
791 | preTimes = parseInt(preT.month);
792 | nextTimes = parseInt(nextT.month);
793 | modelText = this.config.lang === 'cn' ? '结束月份必须大于开始月份！' : 'The end month must be greater than the beginning month.';
794 | } else if (type === 'selectTime'){
795 | preTimes = `2018/01/01 ${preT.hour}:${preT.minute}:${preT.second}`;
796 | preTimes = new Date(preTimes).getTime();
797 | nextTimes = `2018/01/01 ${nextT.hour}:${nextT.minute}:${nextT.second}`;
798 | nextTimes = new Date(nextTimes).getTime();
799 | modelText = this.config.lang === 'cn' ? '结束时间必须大于开始时间！' : 'The end time must be greater than the start time.';
800 | }
801 |
802 | let result = false;
803 | let isShowTime = this.config.showtime || this.obj.$noDoubleObj.config.showtime;
804 | if (
805 | (this.obj.isDoubleOne && nextTimes <= preTimes && !isShowTime) ||
806 | (this.obj.isDoubleOne && nextTimes < preTimes && isShowTime)
807 | ) result = true;
808 | if (
809 | (!this.obj.isDoubleOne && nextTimes >= preTimes && !isShowTime) ||
810 | (!this.obj.isDoubleOne && nextTimes > preTimes && isShowTime)
811 | ) result = true;
812 | let timer = null;
813 | if (result) {
814 | clearTimeout(timer);
815 | const modelObj = this.$obj[query]('.zane-model-miss')
816 | modelObj.style.display = 'block'
817 | this.$obj[query]('.zane-model-content').innerHTML = modelText;
818 | timer = setTimeout(() => { modelObj.style.display = 'none' }, 1000)
819 | }
820 | return result;
821 | }
822 |
823 | // 获得年html
824 | getYearHtml(year,isreset,clickType){
825 | year = year || new Date().getFullYear();
826 | year = parseInt(year)
827 | // double 处理
828 | if(this.config.isDouble&&this.obj.isDoubleOne&&clickType=='next'){
829 | year = year + this.obj.totalYear;
830 | }else if(this.config.isDouble&&!this.obj.isDoubleOne&&clickType=='pre'){
831 | year = year - this.obj.totalYear;
832 | }
833 | let yearDatas = {
834 | nowyear:year,
835 | datalist:[]
836 | };
837 | for (var i = 0; i < this.obj.totalYear; i++) {
838 | let getyear = year-Math.floor(this.obj.totalYear/2)+i
839 | if(i === 0) yearDatas.firstYear = getyear;
840 | if(i === this.obj.totalYear-1) yearDatas.lastYear = getyear;
841 | yearDatas.datalist.push({
842 | class:'',
843 | year:getyear
844 | })
845 | }
846 |
847 | this.obj.fulldatas.year = this.config.isDouble?yearDatas.nowyear:''
848 | this.judgeCalendarRender('year',yearDatas,isreset,clickType);
849 | }
850 |
851 | // 上一年
852 | perYear(year){
853 | year = year-this.obj.totalYear
854 | let isreset = this.config.isDouble&&this.obj.isDoubleOne?true:false
855 | this.getYearHtml(year,isreset,'pre')
856 | }
857 |
858 | // 下一年
859 | nextYear(year){
860 | year = year+this.obj.totalYear
861 | let isreset = this.config.isDouble&&!this.obj.isDoubleOne?true:false
862 | this.getYearHtml(year,isreset,'next')
863 | }
864 |
865 | // 获得年
866 | getYear(){
867 | let _this = this;
868 | let objs = this.$obj
869 | [query]('.main-check-year')[quall]('td');
870 | this.on(objs,'click',function(e){
871 | let year = e.target.nodeName === 'TD' ? e.target.children[0].getAttribute('data-year') : e.target.getAttribute('data-year')
872 | let fulldate = `${year}/${_this.obj.fulldatas.month}/${_this.obj.fulldatas.today}`
873 | if(_this.config.type === 'year'){
874 | if (_this.config.isDouble){
875 | const result = _this.compareTimes('getYear', _this.obj.$noDoubleObj.obj.fulldatas, { year: year });
876 | if (result) return;
877 | }
878 | _this.config.isDouble ? _this.obj.fulldatas.year = year : _this.getYearMonthAndDay(year,false)
879 | }else{
880 | //double 处理
881 | let clickType = _this.obj.isDoubleOne?'pre':'';
882 | _this.setBeginEndTime(fulldate);
883 | _this.judgeCalendarRender('day',fulldate,true,clickType)
884 | }
885 |
886 | //选择具体日期添加样式
887 | _this.forEach(objs, (index, item) => {
888 | _this.removeClass(item, 'active');
889 | })
890 | _this.addClass(this, 'active');
891 | })
892 | }
893 |
894 | // 获得month html
895 | getMonthHtml(month){
896 | let date = new Date();
897 | let year = this.obj.fulldatas.year || date.getFullYear();
898 | month = month || date.getMonth()+1
899 | let monthDatas = {
900 | nowmonth:month,
901 | year:year,
902 | datalist:this.obj.lang.month
903 | };
904 | this.obj.fulldatas.month = this.config.isDouble?monthDatas.nowmonth:''
905 | this.judgeCalendarRender('month',monthDatas);
906 | }
907 |
908 | // 上一月
909 | perMonthYear(year,month){
910 | let monthDatas = {
911 | nowmonth:month,
912 | year:year-1,
913 | datalist:this.obj.lang.month
914 | };
915 | this.judgeCalendarRender('month',monthDatas);
916 | }
917 |
918 | // 下一月
919 | nextMonthYear(year,month){
920 | let monthDatas = {
921 | nowmonth:month,
922 | year:year+1,
923 | datalist:this.obj.lang.month
924 | };
925 | this.judgeCalendarRender('month',monthDatas);
926 | }
927 |
928 | // 获得月
929 | getMonth(){
930 | let _this = this;
931 | let objs = this.$obj
932 | [query]('.main-check-month')[quall]('td');
933 | this.on(objs,'click',function(e){
934 | let obj = e.target.nodeName === 'TD' ? e.target.children[0] : e.target;
935 | let year = obj.getAttribute('data-year')
936 | let month = obj.getAttribute('data-month')
937 | let fulldate = `${year}/${month}/${_this.obj.fulldatas.today}`
938 | if(_this.config.type === 'month'){
939 | if (_this.config.isDouble) {
940 | const result = _this.compareTimes('getMonth', _this.obj.$noDoubleObj.obj.fulldatas, { month: month });
941 | if (result) return;
942 | }
943 | _this.config.isDouble ? _this.obj.fulldatas.month = month : _this.getYearMonthAndDay(month,false)
944 | }else{
945 | let clickType = _this.obj.isDoubleOne ? 'pre' : '';
946 | _this.setBeginEndTime(fulldate);
947 | _this.judgeCalendarRender('day', fulldate, true, clickType)
948 | }
949 | //选择具体日期添加样式
950 | _this.forEach(objs, (index, item) => {
951 | _this.removeClass(item, 'active');
952 | })
953 | _this.addClass(this, 'active');
954 | })
955 | }
956 |
957 | // 获得时间HTML
958 | getTimeHtml(time){
959 | //double 处理
960 | if(this.config.isDouble&&!this.obj.isDoubleOne&&this.config.type=='day') this.obj.$noDoubleObj.getTimeHtml();
961 | let nowday = new Date().Format('yyyy/MM/dd')
962 | let date = time?new Date(nowday+' '+time):new Date();
963 | let hour = date.getHours();
964 | let minute = date.getMinutes();
965 | let second = date.getSeconds();
966 | hour = (hour+'').length<2? '0'+hour : hour;
967 | minute = (minute+'').length<2? '0'+minute:minute;
968 | second = (second+'').length<2? '0'+second:second;
969 |
970 | this.obj.fulldatas.hour = this.obj.fulldatas.hour||hour
971 | this.obj.fulldatas.minute = this.obj.fulldatas.minute||minute
972 | this.obj.fulldatas.second = this.obj.fulldatas.second||second
973 |
974 | let datas ={
975 | hour:this.obj.fulldatas.hour,
976 | minute:this.obj.fulldatas.minute,
977 | second:this.obj.fulldatas.second,
978 | hours:[],
979 | minutes:[],
980 | seconds:[]
981 | }
982 | for (var i = 0; i < 24; i++) {
983 | if(i<10){
984 | datas.hours.push('0'+i)
985 | }else{
986 | datas.hours.push(i+'')
987 | }
988 | }
989 | for (var i = 0; i < 60; i++) {
990 | if(i<10){
991 | datas.minutes.push('0'+i)
992 | datas.seconds.push('0'+i)
993 | }else{
994 | datas.minutes.push(i+'')
995 | datas.seconds.push(i+'')
996 | }
997 | }
998 | this.judgeCalendarRender('time',datas);
999 | }
1000 |
1001 | // 选择时间
1002 | selectTime(){
1003 | let _this = this
1004 | let hourObjs = this.$obj[query]('ul.hour')[quall]('li')
1005 | let minuteObjs = this.$obj[query]('ul.minute')[quall]('li')
1006 |
1007 | let secondObjs = null;
1008 | if(this.config.showsecond){
1009 | secondObjs = this.$obj[query]('ul.second')[quall]('li')
1010 | }
1011 |
1012 | this.on(hourObjs,'click',function(e){
1013 | _this.forEach(hourObjs,(index,item)=>{
1014 | _this.removeClass(item,'active');
1015 | })
1016 | _this.addClass(this,'active');
1017 | _this.obj.fulldatas.hour = this.getAttribute('data-time');
1018 | })
1019 |
1020 | this.on(minuteObjs,'click',function(e){
1021 | if(_this.config.isDouble && !_this.config.showsecond){
1022 | const result = _this.compareTimes(
1023 | 'selectTime',
1024 | _this.obj.$noDoubleObj.obj.fulldatas,
1025 | Object.assign({}, _this.obj.fulldatas, { minute: this.getAttribute('data-time') })
1026 | );
1027 | if (result) return;
1028 | }
1029 | _this.forEach(minuteObjs,(index,item)=>{
1030 | _this.removeClass(item,'active');
1031 | })
1032 | _this.addClass(this,'active');
1033 | _this.obj.fulldatas.minute = this.getAttribute('data-time');
1034 | })
1035 |
1036 | if(this.config.showsecond){
1037 | this.on(secondObjs,'click',function(e){
1038 | if (_this.config.isDouble) {
1039 | const result = _this.compareTimes(
1040 | 'selectTime',
1041 | _this.obj.$noDoubleObj.obj.fulldatas,
1042 | Object.assign({}, _this.obj.fulldatas, { second: this.getAttribute('data-time') })
1043 | );
1044 | if (result) return;
1045 | }
1046 | _this.forEach(secondObjs,(index,item)=>{
1047 | _this.removeClass(item,'active');
1048 | })
1049 | _this.addClass(this,'active');
1050 | _this.obj.fulldatas.second = this.getAttribute('data-time');
1051 | })
1052 | }
1053 | }
1054 |
1055 | // 返回日期
1056 | backDateHtml(){
1057 | //double 处理
1058 | if(this.config.isDouble&&!this.obj.isDoubleOne&&this.config.type=='day') this.obj.$noDoubleObj.backDateHtml();
1059 | this.obj.handleType = 'date';
1060 | let bottomHTML = this.bottomCheckTimeHTML();
1061 | this.renderCommonHtml('day','','',bottomHTML,false);
1062 | }
1063 |
1064 | // 今天
1065 | changeToToday(){
1066 | let json = this.getTimeDates();
1067 | let value = null;
1068 | let isFormat = true;
1069 | if(this.config.showtime){
1070 | value = `${json.year}/${json.month}/${json.today} ${json.hour}:${json.minute}:${json.second}`
1071 | }else if(this.config.type == 'time'){
1072 | isFormat = false;
1073 | value = `${json.hour}:${json.minute}:${json.second}`
1074 | }else{
1075 | value = `${json.year}/${json.month}/${json.today}`
1076 | }
1077 | this.getYearMonthAndDay(value,isFormat)
1078 | }
1079 |
1080 | // 清空
1081 | cleanInputVal(){
1082 | let value = ""
1083 | this.getYearMonthAndDay(value,false)
1084 | }
1085 |
1086 | // 确定
1087 | makeSureSelectTime(){
1088 | let value = null;
1089 | let isFormat = true;
1090 | if(this.config.showtime){
1091 | value = `${this.obj.fulldatas.year}/${this.obj.fulldatas.month}/${this.obj.fulldatas.today} ${this.obj.fulldatas.hour}:${this.obj.fulldatas.minute}`
1092 | if(this.config.showsecond){
1093 | value = `${value}:${this.obj.fulldatas.second}`
1094 | }
1095 | }else if(this.config.type == 'time'&&!this.config.isDouble){
1096 | isFormat = false;
1097 | value = `${this.obj.fulldatas.hour}:${this.obj.fulldatas.minute}`
1098 | if(this.config.showsecond){
1099 | value = `${value}:${this.obj.fulldatas.second}`
1100 | }
1101 | }else{
1102 | //doubule 处理
1103 | if(this.config.isDouble){
1104 | let noDoubleData = this.obj.$noDoubleObj.obj.fulldatas;
1105 | let noDoubleStr,haveDoubleStr
1106 |
1107 | switch(this.config.type){
1108 | case 'day':
1109 | if(this.obj.$noDoubleObj.config.showtime){
1110 | noDoubleStr = `${noDoubleData.year}/${noDoubleData.month}/${noDoubleData.today} ${noDoubleData.hour}:${noDoubleData.minute}`
1111 | haveDoubleStr = `${this.obj.fulldatas.year}/${this.obj.fulldatas.month}/${this.obj.fulldatas.today} ${this.obj.fulldatas.hour}:${this.obj.fulldatas.minute}`
1112 | if(this.obj.$noDoubleObj.config.showsecond){
1113 | noDoubleStr = `${noDoubleStr}:${noDoubleData.second}`
1114 | haveDoubleStr = `${haveDoubleStr}:${this.obj.fulldatas.second}`
1115 | }
1116 | }else{
1117 | noDoubleStr = `${noDoubleData.year}/${noDoubleData.month}/${noDoubleData.today}`
1118 | haveDoubleStr = `${this.obj.fulldatas.year}/${this.obj.fulldatas.month}/${this.obj.fulldatas.today}`
1119 | };
1120 | break;
1121 | case 'year':
1122 | isFormat = false
1123 | noDoubleStr = `${noDoubleData.year}`
1124 | haveDoubleStr = `${this.obj.fulldatas.year}`
1125 | break;
1126 | case 'month':
1127 | isFormat = false
1128 | noDoubleStr = `${noDoubleData.month}`
1129 | haveDoubleStr = `${this.obj.fulldatas.month}`
1130 | break;
1131 | case 'time' :
1132 | isFormat = false
1133 | noDoubleStr = `${noDoubleData.hour}:${noDoubleData.minute}`
1134 | haveDoubleStr = `${this.obj.fulldatas.hour}:${this.obj.fulldatas.minute}`
1135 | if(this.config.showsecond){
1136 | noDoubleStr = `${noDoubleStr}:${noDoubleData.second}`
1137 | haveDoubleStr = `${haveDoubleStr}:${this.obj.fulldatas.second}`
1138 | }
1139 | break;
1140 | };
1141 | value = noDoubleStr +'|'+ haveDoubleStr
1142 | }else{
1143 | value = `${this.obj.fulldatas.year}/${this.obj.fulldatas.month}/${this.obj.fulldatas.today}`
1144 | }
1145 | }
1146 | this.getYearMonthAndDay(value,isFormat)
1147 | }
1148 |
1149 | // 确定年月日的值并在input里面显示，时间选择器隐藏
1150 | getYearMonthAndDay(datatime,isFormat=true){
1151 | let formatTime = null;
1152 | let begintime='';
1153 | let endtime='';
1154 |
1155 | //doubule 处理
1156 | if(datatime&&datatime.indexOf('|') != -1){
1157 | let arr = datatime.split('|');
1158 | let val1 = null
1159 | let val2 = null
1160 | if(isFormat){
1161 | val1 = begintime = new Date(arr[0]).Format(this.config.format)
1162 | val2 = endtime = new Date(arr[1]).Format(this.config.format)
1163 | }else{
1164 | val1 = begintime = arr[0]
1165 | val2 = endtime = arr[1]
1166 | }
1167 | formatTime = val1 +' - '+ val2
1168 | }else{
1169 | formatTime = begintime = isFormat?new Date(datatime).Format(this.config.format):datatime;
1170 | }
1171 |
1172 | if(this.obj.input.nodeName !== 'INPUT'){
1173 | this.obj.input.textContent = formatTime;
1174 | }else{
1175 | this.obj.input.value = formatTime;
1176 | }
1177 |
1178 | // 移除事件插件dom元素
1179 | this.removeCalendar();
1180 |
1181 | this.config.done&&this.config.done(formatTime,begintime,endtime);
1182 | if(this.obj.initVal!=formatTime&&this.config.change)this.config.change(formatTime,begintime,endtime)
1183 | }
1184 |
1185 | // 判断插件渲染类型 day | year | month | time
1186 | judgeCalendarRender(type,any,isreset,clickType){
1187 | let mainHTML,topHTML,bottomHTML
1188 | switch(type){
1189 | case 'day':
1190 | this.obj.handleType = 'day';
1191 | let json = this.getTimeDates(any,clickType);
1192 | this.obj.fulldatas = json;
1193 | // double 处理
1194 | this.compareSize(isreset,clickType);
1195 | topHTML = this.topCheckDayHTML(json)
1196 | mainHTML = this.mainCheckDayHTML(json);
1197 | this.renderCommonHtml('day',topHTML,mainHTML);
1198 | // 计算表格高度
1199 | this.countHeight('.main-check-day',7);
1200 | this.getDay();
1201 | setTimeout(()=>{
1202 | this.addOrRemoveClass();
1203 | },200)
1204 |
1205 | break;
1206 | case 'year':
1207 | this.obj.handleType = 'year';
1208 | // double 处理
1209 | this.compareSize(isreset,clickType);
1210 | mainHTML = this.mainCheckYearHTML(any);
1211 | topHTML = this.topCheckYearHTML(any);
1212 | this.renderCommonHtml('year',topHTML,mainHTML);
1213 | // 计算表格高度
1214 | this.countHeight('.main-check-year',6);
1215 | this.getYear();
1216 | break;
1217 | case 'month':
1218 | this.obj.handleType = 'month';
1219 | mainHTML = this.mainCheckMonthHTML(any);
1220 | topHTML = this.topCheckMonthHTML(any);
1221 | this.renderCommonHtml('month',topHTML,mainHTML);
1222 | // 计算表格高度
1223 | this.countHeight('.main-check-month',4);
1224 | this.getMonth();
1225 | break;
1226 | case 'time':
1227 | this.obj.handleType = 'time';
1228 | mainHTML = this.mainCheckTimeHTML(any);
1229 | topHTML = this.topCheckTimeHTML();
1230 | bottomHTML = this.bottomCheckTimeHTML();
1231 | this.renderCommonHtml('time',topHTML,mainHTML,bottomHTML);
1232 | this.$obj[query]('.select-time').style.height = this.config.height-115 +'px'
1233 | let hourScrollTop = this.$obj[query]('ul.hour')[query]('li.active').offsetTop
1234 | let minuteScrollTop = this.$obj[query]('ul.minute')[query]('li.active').offsetTop
1235 |
1236 | this.$obj[query]('ul.hour').scrollTop = hourScrollTop-150
1237 | this.$obj[query]('ul.minute').scrollTop = minuteScrollTop-150
1238 |
1239 | if(this.config.showsecond){
1240 | let secondScrollTop = this.$obj[query]('ul.second')[query]('li.active').offsetTop
1241 | this.$obj[query]('ul.second').scrollTop = secondScrollTop-150
1242 | }
1243 |
1244 | this.selectTime();
1245 | break;
1246 | }
1247 | }
1248 |
1249 | renderCommonHtml(type,topHTML,mainHTML,bottomHTML,isrender=true){
1250 | if(type == 'time'|| !isrender) this.$obj[query](`.btn-select-time`).innerHTML = bottomHTML;
1251 | if(isrender){
1252 | this.$obj[query](`.top-check-${type}`).innerHTML = topHTML;
1253 | this.$obj[query](`.main-check-${type}`).innerHTML = mainHTML;
1254 | };
1255 | this.showOrHide(this.$obj[quall]('.common-top'),'hide')
1256 | this.showOrHide(this.$obj[quall]('.common-main'),'hide')
1257 | this.$obj[query](`.main-check-${type}`).style.display = 'block'
1258 | this.$obj[query](`.top-check-${type}`).style.display = 'block'
1259 | }
1260 |
1261 | // 比较double数据之间的大小，并从新赋值
1262 | compareSize(isreset,clickType){
1263 | if(!isreset) return;
1264 | // double 处理
1265 | let prev = this.obj.fulldatas
1266 | let next = this.obj.$noDoubleObj
1267 | if(this.config.isDouble&&prev&&next){
1268 | next = next.obj.fulldatas
1269 | if(this.obj.isDoubleOne){
1270 | this.getDoubleTime({
1271 | prev:next,
1272 | next:prev,
1273 | clickType:clickType
1274 | })
1275 | }else{
1276 | this.getDoubleTime({
1277 | prev:prev,
1278 | next:next,
1279 | clickType:clickType
1280 | })
1281 | }
1282 | };
1283 | }
1284 |
1285 | getDoubleTime(json){
1286 | let nextfullstr,prefullstr,perTime,nextTime
1287 | switch(this.config.type){
1288 | case 'day':
1289 | prefullstr = `${json.prev.year}/${json.prev.month}/${json.prev.today}`
1290 | nextfullstr = `${json.next.year}/${json.next.month}/${json.next.today}`
1291 | perTime = new Date(prefullstr).getTime()
1292 | nextTime = new Date(nextfullstr).getTime()
1293 | if(perTime >= nextTime-86400000) {
1294 | const times = this.obj.isDoubleOne ? nextTime - 86400000 : perTime + 86400000;
1295 | this.obj.$noDoubleObj.setBeginEndTime(times)
1296 | this.obj.$noDoubleObj.judgeCalendarRender('day', times,false,json.clickType)
1297 | }
1298 | break;
1299 | case 'year':
1300 | perTime = `${json.prev.year}`
1301 | nextTime = `${json.next.year}`
1302 | if(perTime >= nextTime) {
1303 | this.obj.$noDoubleObj.getYearHtml(nextTime,false,json.clickType)
1304 | }
1305 | break;
1306 | }
1307 |
1308 | }
1309 |
1310 | //插件自身点击阻止冒泡
1311 | calendarClick(){
1312 | this.on(this.obj.calendar,'click',(e)=>{
1313 | e.preventDefault();
1314 | e.stopPropagation();
1315 | })
1316 | }
1317 |
1318 | // 继承方法
1319 | extend(obj1,obj2){
1320 | return Object.assign(obj1,obj2);
1321 | }
1322 |
1323 | hasClass(obj, cls) {
1324 | return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
1325 | }
1326 |
1327 | addClass(obj, cls) {
1328 | if (!this.hasClass(obj, cls)) obj.className += " " + cls;
1329 | }
1330 |
1331 | removeClass(obj, cls) {
1332 | if (this.hasClass(obj, cls)) {
1333 | var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
1334 | obj.className = obj.className.replace(reg, ' ');
1335 | }
1336 | }
1337 |
1338 | //对象遍历
1339 | forEach(obj, fn){
1340 | let key
1341 | if(typeof fn !== 'function') return this;
1342 | obj = obj || [];
1343 | if(Object.prototype.toString.call(obj) == '[object Object]'){
1344 | for(key in obj){
1345 | if(fn.call(obj[key], key, obj[key])) break;
1346 | }
1347 | } else if(Object.prototype.toString.call(obj) =='[object NodeList]' || Object.prototype.toString.call(obj) =='[object Array]'){
1348 | for(key = 0; key < obj.length; key++){
1349 | if(fn.call(obj[key], key, obj[key])) break;
1350 | }
1351 | }else{
1352 | fn.call(obj,0,obj);
1353 | }
1354 | return this;
1355 | };
1356 |
1357 | //事件绑定
1358 | on(obj,eventName, fn){
1359 | return this.forEach(obj,(index, item)=>{
1360 | item.attachEvent ? item.attachEvent('on' + eventName, function(e){
1361 | e.target = e.srcElement;
1362 | fn.call(item, e);
1363 | }) : item.addEventListener(eventName, fn, false);
1364 | });
1365 | };
1366 |
1367 | //中英文月份枚举
1368 | weekToEn(val){
1369 | let num = typeof val == 'string'?parseInt(val):val;
1370 | return this.obj.en.month[num-1];
1371 | }
1372 |
1373 | //
1374 | showOrHide(obj,type){
1375 | for (var i = 0,len=obj.length; i < len; i++) {
1376 | if(type==='hide'){
1377 | obj[i].style.display = 'none'
1378 | }else{
1379 | obj[i].style.display = 'block'
1380 | }
1381 | }
1382 | }
1383 |
1384 | // 计算table tr高度
1385 | countHeight(elename,length){
1386 | let mainH = this.$obj[query]('.zane-date-main').offsetHeight;
1387 | let trObj = this.$obj[query](elename)[quall]('tr')
1388 | let itemH = Math.floor(mainH/length)
1389 | this.forEach(trObj,(index,item)=>{
1390 | item.style.height = itemH + 'px';
1391 | })
1392 | }
1393 |
1394 | // document点击隐藏插件
1395 | documentClick(){
1396 | this.on(doc,'click',(e)=>{
1397 | this.removeCalendar()
1398 | })
1399 | }
1400 |
1401 | // 移除事件选择器
1402 | removeCalendar(calobj){
1403 | let zaneCalendarObjs = doc[quall]('.zane-calendar')
1404 | if(zaneCalendarObjs&&zaneCalendarObjs.length){
1405 | zaneCalendarObjs.forEach(item=>{
1406 | let parent = item.parentElement;
1407 | let parents = parent.parentElement;
1408 | let removed = parents.removeChild(parent);
1409 | })
1410 | }
1411 | }
1412 |
1413 | };
1414 |
1415 | // 实例化日期插件 双选择器DOUBLE区分
1416 | let zaneDate = function(option){
1417 | let begintime,endtime,format;
1418 | format = option.format?option.format.replace(/-/g,'/'):'yyyy/MM/dd'
1419 | if(option.type){
1420 | if(option.type.indexOf('time')!=-1) format = 'HH:mm:ss';
1421 | if(option.type.indexOf('year')!=-1) format = 'yyyy';
1422 | if(option.type.indexOf('month')!=-1) format = 'MM';
1423 | }
1424 | option.type = option.type || 'day'
1425 |
1426 | //处理begintime
1427 | if(option.begintime&&typeof(option.begintime)==='string'){
1428 | begintime = option.begintime.replace(/-/g,'/')
1429 | if(option.type&&option.type.indexOf('time')==-1 || !option.type){
1430 | begintime = new Date(begintime).Format(format)
1431 | }
1432 | }else if(option.begintime&&typeof(option.begintime)==='number'){
1433 | begintime = new Date(option.begintime).Format(format)
1434 | }
1435 |
1436 | // 处理begintime
1437 | if(option.endtime&&typeof(option.endtime)==='string'){
1438 | endtime = option.endtime.replace(/-/g,'/')
1439 | if(option.type&&option.type.indexOf('time')==-1 || !option.type){
1440 | endtime = new Date(endtime).Format(format)
1441 | }
1442 | }else if(option.endtime&&typeof(option.endtime)==='number'){
1443 | endtime = new Date(option.endtime).Format(format)
1444 | }
1445 |
1446 | if(option.type.indexOf('double') != -1){
1447 | option.type = option.type.replace(/double/,'');
1448 | createCalendar({
1449 | showclean:false,
1450 | shownow:false,
1451 | showsubmit:false,
1452 | isDouble:true,
1453 | value:begintime,
1454 | format:format,
1455 | doublevalue:begintime&&endtime?begintime+' - '+endtime:''
1456 | });
1457 | createCalendar({
1458 | shownow:false,
1459 | showtime:false,
1460 | isDouble:true,
1461 | double:'DOUBLE',
1462 | value:endtime,
1463 | format:format,
1464 | doublevalue:begintime&&endtime?begintime+' - '+endtime:''
1465 | });
1466 | }else{
1467 | createCalendar({
1468 | format:format,
1469 | value:begintime,
1470 | });
1471 | }
1472 | // 新建日期插件
1473 | function createCalendar(json={}){
1474 | let calendarName = option.elem.substring(1);
1475 | calendarName = calendarName.replace(/[_-]/g,'').toUpperCase();
1476 | option.calendarName = json&&json.double ?calendarName+json.double:calendarName;
1477 | if(option.width){
1478 | option.width = option.width<220?220:option.width
1479 | option.width = option.width>500?500:option.width
1480 | }
1481 | if(option.height){
1482 | option.height = option.height<240?240:option.height
1483 | option.height = option.height>350?350:option.height
1484 | }
1485 |
1486 | let cloneOption = Object.assign(extendDeep(option),json);
1487 | window[option.calendarName] = new calendar(cloneOption)
1488 | }
1489 | //深度复制
1490 | function extendDeep(parent, child) {
1491 | child = child || {};
1492 | for(var i in parent) {
1493 | if(parent.hasOwnProperty(i)) {
1494 | if(typeof parent[i] === "object") {
1495 | child[i] = (Object.prototype.toString.call(parent[i]) === "[object Array]") ? [] : {};
1496 | extendDeep(parent[i], child[i]);
1497 | } else {
1498 | child[i] = parent[i];
1499 | }
1500 | }
1501 | }
1502 | return child;
1503 | };
1504 |
1505 | }
1506 | if ( !noGlobal ) window.zaneDate = zaneDate;
1507 |
1508 | return zaneDate;
1509 |
1510 | });
1511 |
--------------------------------------------------------------------------------