layui laydate失去焦点事件没有触发时间验证
我再做项目中,遇到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()
})

浙公网安备 33010602011771号