Shulou(Shulou.com)06/02 Report--

Editor to share with you how to add an icon to the layDate input box. I hope you will get something after reading this article. Let's discuss it together.

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 to make the laydate input box more visible

Look at the picture first.

Add the following to the modified module 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 module (uncompressed version) added after 450line if (! options.elem [0]) return;

If (! isStatic) {lay.each (options.elem,function (iJing item) {var icon=lay.elem ("I", {class: "layui-icon laydate-input-icon"}); icon[ XSS _ clean] = "& # xe637;"; / / the space var pnode= item in the value after innerHTML is to be removed [XSS _ item] 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);});}

Complete code: https://pan.baidu.com/s/1eRHhBrsmNPN8d2d06IXz2w

Independent version of 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;}

After 450lines of laydate.js (uncompressed)

If (! isStatic) {lay.each (options.elem,function (iJing item) {var icon=lay.elem ("I", {class: "layui-icon laydate-icon laydate-input-icon"}); icon [XSS _ clean] = "& # xe602;" / / Please remove the space in the innerHTML value and change it to your own icon. Temporarily use the laydate right arrow icon to display var pnode= item [XSS _ clean]; 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);});} after reading this article, I believe you have some understanding of "how to add an icon to the layDate input box". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.