layDate入力ボックスにアイコンを追加する方法（コード付き）

layDate 入力ボックスにアイコンを追加する方法:

layui 2.3.0-rc1

laydate 入力ボックスにアイコンを追加するbox, letlaydate入力ボックスがより目立つようになりました

最初に画像を見てください

修正箇所

モジュール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 モジュール (非圧縮バージョン)
追加

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

450 行目の後に完全なコード if(!options.elem[0]) return; .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 中国語 Web サイトの他の関連記事を参照してください。