如何为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输入框加上图标”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

文章名称：如何为layDate输入框加上图标-创新互联
当前地址：http://shouzuofang.com/article/iogdc.html