我再做项目中,遇到layui中laydate组件使用时通过键盘控制事件空间选中不会触发时间组件的验证。
解决方案:
Class.prototype.render = function () { var that = this , options = that.config , lang = that.lang() , isStatic = options.position === 'static' //主面板 , elem = that.elem = lay.elem('div', { id: that.elemID , 'class': [ 'layui-laydate' , options.range ? ' layui-laydate-range' : '' , isStatic ? (' ' + ELEM_STATIC) : '' , options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : '' ].join('') }) //主区域 , elemMain = that.elemMain = [] , elemHeader = that.elemHeader = [] , elemCont = that.elemCont = [] , elemTable = that.table = [] //底部区域 , divFooter = that.footer = lay.elem('div', { 'class': ELEM_FOOTER }); if (options.zIndex) elem.style.zIndex = options.zIndex; //单双日历区域 lay.each(new Array(2), function (i) { if (!options.range && i > 0) { return true; } //头部区域 var divHeader = lay.elem('div', { 'class': 'layui-laydate-header' }) //左右切换 , headerChild = [function () { //上一年 var elem = lay.elem('i', { 'class': 'layui-icon laydate-icon laydate-prev-y' }); elem.innerHTML = ''; return elem; }(), function () { //上一月 var elem = lay.elem('i', { 'class': 'layui-icon laydate-icon laydate-prev-m' }); elem.innerHTML = ''; return elem; }(), function () { //年月选择 var elem = lay.elem('div', { 'class': 'laydate-set-ym' }), spanY = lay.elem('span'), spanM = lay.elem('span'); elem.appendChild(spanY); elem.appendChild(spanM); return elem; }(), function () { //下一月 var elem = lay.elem('i', { 'class': 'layui-icon laydate-icon laydate-next-m' }); elem.innerHTML = ''; return elem; }(), function () { //下一年 var elem = lay.elem('i', { 'class': 'layui-icon laydate-icon laydate-next-y' }); elem.innerHTML = ''; return elem; }()] //日历内容区域 , divContent = lay.elem('div', { 'class': 'layui-laydate-content' }) , table = lay.elem('table') , thead = lay.elem('thead'), theadTr = lay.elem('tr'); //生成年月选择 lay.each(headerChild, function (i, item) { divHeader.appendChild(item); }); //生成表格 thead.appendChild(theadTr); lay.each(new Array(6), function (i) { //表体 var tr = table.insertRow(0); lay.each(new Array(7), function (j) { if (i === 0) { var th = lay.elem('th'); th.innerHTML = lang.weeks[j]; theadTr.appendChild(th); } tr.insertCell(j); }); }); table.insertBefore(thead, table.children[0]); //表头 divContent.appendChild(table); elemMain[i] = lay.elem('div', { 'class': 'layui-laydate-main laydate-main-list-' + i }); elemMain[i].appendChild(divHeader); elemMain[i].appendChild(divContent); elemHeader.push(headerChild); elemCont.push(divContent); elemTable.push(table); }); //生成底部栏 lay(divFooter).html(function () { var html = [], btns = []; if (options.type === 'datetime') { html.push('<span lay-type="datetime" class="' + ELEM_TIME_BTN + '">' + lang.timeTips + '</span>'); } if (!(!options.range && options.type === 'datetime')) { html.push('<span class="' + ELEM_PREVIEW + '" title="' + lang.preview + '"></span>') } lay.each(options.btns, function (i, item) { var title = lang.tools[item] || 'btn'; if (options.range && item === 'now') return; if (isStatic && item === 'clear') title = options.lang === 'cn' ? '重置' : 'Reset'; btns.push('<span lay-type="' + item + '" class="laydate-btns-' + item + '">' + title + '</span>'); }); html.push('<div class="laydate-footer-btns">' + btns.join('') + '</div>'); return html.join(''); }()); //插入到主区域 lay.each(elemMain, function (i, main) { elem.appendChild(main); }); options.showBottom && elem.appendChild(divFooter); //生成自定义主题 if (/^#/.test(options.theme)) { var style = lay.elem('style') , styleText = [ '#{{id}} .layui-laydate-header{background-color:{{theme}};}' , '#{{id}} .layui-this{background-color:{{theme}} !important;}' ].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, options.theme); if ('styleSheet' in style) { style.setAttribute('type', 'text/css'); style.styleSheet.cssText = styleText; } else { style.innerHTML = styleText; } lay(elem).addClass('laydate-theme-molv'); elem.appendChild(style); } //记录当前执行的实例索引 laydate.thisId = options.id; //移除上一个控件 that.remove(Class.thisElemDate); //如果是静态定位,则插入到指定的容器中,否则,插入到body isStatic ? options.elem.append(elem) : ( document.body.appendChild(elem) , that.position() //定位 ); that.checkDate().calendar(null, 0, 'init'); //初始校验 that.changeEvent(); //日期切换 Class.thisElemDate = that.elemID; typeof options.ready === 'function' && options.ready(lay.extend({}, options.dateTime, { month: options.dateTime.month + 1 })); that.preview(); };
中,在that.preview()上添加一个失去焦点事件
//添加失去焦点事件 $(that.bindElem).blur(function () {
失去焦点 并且 触发选择事件 var i = that.checkDate().done() })