How to add an icon to the layDate input box (with code)-Layui Tutorial-php.cn

How to add an icon to the layDate input box (with code)

How to add an icon to the layDate input box:

Based on layui 2.3.0-rc1

Add an icon to the laydate input box, let The laydate input box is more conspicuous

Look at the picture first

How to add an icon to the layDate input box (with code)

Modified place

Modify the module css and add in 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; }

Copy after login

laydate.js module (uncompressed version)
Add

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

Copy after login

Full code after line 450 if(!options.elem[0]) return; .com/s/1eRHhBrsmNPN8d2d06IXz2w

standalone layDate 5.0.9
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; }

Copy after login

laydate.js (uncompressed) 450 lines later

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

Copy after login

How to add an icon to the layDate input box (with code)

For more articles related to the layui framework, please pay attention to thelayui usage tutorialcolumn.

The above is the detailed content of How to add an icon to the layDate input box (with code). For more information, please follow other related articles on the PHP Chinese website!