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() })

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM