layDate 입력란에 아이콘을 추가하는 방법(코드 포함)

layDate 입력 상자에 아이콘 추가 방법:

layui 2.3.0-rc1 기준

laydate 입력 상자에 아이콘을 추가하여 더 잘 보이도록

그림을 먼저 보세요

수정

모듈 csslaydate.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-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);
      });
    }

추가 if(!options.elem[0]) 전체 코드: https //pan.baidu.com/s/1eRHhBrsmNPN8d2d06IXz2w

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

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

layui 프레임워크 관련 글 더 많이 결제해주세요 layui 사용법 튜토리얼 칼럼을 주목해주세요.

위 내용은 layDate 입력란에 아이콘을 추가하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!