如何為layDate輸入框加上圖標(biāo)

小編給大家分享一下如何為layDate輸入框加上圖標(biāo)，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

為layDate輸入框加上圖標(biāo)的方法：

基于layui 2.3.0-rc1

為laydate輸入框加上圖標(biāo)，讓laydate輸入框更顯眼

先看圖片

修改的地方修改模塊css laydate.css里添加：

.laydate-with-icon{position: relative;}.laydate-with-icon .laydateinput{margin-right: 24px;}.laydate-with-icon .laydate-input-icon{position:absolute;right:5px;top:50%;margin-top:-12px;width:16px;height:24px;color:#aaa;}

laydate.js模塊 （未壓縮版）在450行 if(!options.elem[0]) return; 后 添加

if (!isStatic) {         lay.each(options.elem,function(i,item) {        var icon=lay.elem("i",{          class:"layui-icon laydate-input-icon"        });        icon.innerHTML="& # xe637;";//這里要去掉innerHTML后面值里的空格        var pnode=item.parentNode;        var objdiv = lay.elem('div', {          'class': 'laydate-with-icon'        });        lay(item).addClass("laydateinput");        pnode.insertBefore(icon,item);        pnode.insertBefore(objdiv,item);        objdiv.appendChild(item);        objdiv.appendChild(icon);      });    }

完整代碼：https://pan.baidu.com/s/1eRHhBrsmNPN8d2d06IXz2w

獨(dú)立版layDate 5.0.9laydate.css

.laydate-with-icon{  position: relative;}.laydate-with-icon .laydateinput{  margin-right: 24px;}.laydate-with-icon .laydate-input-icon{  position:absolute;right:5px;top:50%;margin-top:-12px;width:16px;height:24px;color:#aaa;}

laydate.js（未壓縮的）450行后

  if (!isStatic) {         lay.each(options.elem,function(i,item) {        var icon=lay.elem("i",{          class:"layui-icon laydate-icon laydate-input-icon"        });        icon.innerHTML="& # xe602;"; //這里請(qǐng)去掉innerHTML值里的空格，可以改成自己的圖標(biāo)，暫時(shí)用laydate的右箭頭圖標(biāo)顯示        var pnode=item.parentNode;        var objdiv = lay.elem('div', {          'class': 'laydate-with-icon'          ,"style":"width:"+item.offsetWidth+"px;"        });        lay(item).addClass("laydateinput");        pnode.insertBefore(icon,item);        pnode.insertBefore(objdiv,item);        objdiv.appendChild(item);        objdiv.appendChild(icon);      });    }

看完了這篇文章，相信你對(duì)“如何為layDate輸入框加上圖標(biāo)”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！