如何為layDate輸入框加上圖標

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

為layDate輸入框加上圖標的方法：

基于layui 2.3.0-rc1

為laydate輸入框加上圖標，讓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

獨立版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;"; //這里請去掉innerHTML值里的空格，可以改成自己的圖標，暫時用laydate的右箭頭圖標顯示        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);      });    }

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