ブートストラップ日付ピッカーは、単純なHTMLではなく（＃）で動作しているHTML（）

Question

HTMLでの作業を：DOM挿入に

var ETD = $("#ETD"); 
ETD.html("<input class='m-ctrl-medium date-picker' id='lateETD1' name="dateRecv" size='16' type='text' value=''/>"); 

問題：で動作していない

<input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> 

。 datepickerの代わりに単純なテキストボックスが表示されます。

Answer 1

これを試してください：あなたは、おそらく日付ピッカーを初期化しているため

var ETD = $("#ETD"); 
ETD.html("<input class='m-ctrl-medium date-picker' id='lateETD1' name="dateRecv" size='16' type='text' value=''/>"); 
$(ETD).datepicker(); 

Answer 2

それだときに新しい要素が存在する前に、あるDOMがロード、。あなたがスクリプトから動的にテキストボックスを追加した後、日付ピッカーを再初期化する必要が

$('<input class="m-ctrl-medium date-picker" id="lateETD1" name="dateRecv" size="16" type="text" value="" />').appendTo('#ETD').datepicker() 

Answer 3

：あなたはそれはDOM、このようなものに追加されます後に新しい要素で再びそれを初期化する必要があります。

var ETD = $("#ETD"); 
 
ETD.html("<input class='m-ctrl-medium date-picker' id='lateETD1' name='dateRecv' size='16' type='text' value=''/>"); 
 

 
$('#lateETD1').datepicker({ 
 
    autoclose: true 
 
});

<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 

 
<div id='ETD'></div>