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

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺(jué)設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開(kāi)發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。

為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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)名稱：如何為layDate輸入框加上圖標(biāo)-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/iogdc.html