Flatpickr追加の問題

Question

私はFlatpickrとして知られているプラ​​グインを使用しています。それはうまく動作しますが、クリック時の動作を追加して別のdivに追加しようとすると、そこに複数のテキストボックスが表示されます。 その奇妙な、今私が今必要なものは、そのdivでflatpicrを見つけて、それ以上のものがあればそれを削除しなければならないでしょう。または、これに代わる他の解決策があります。

<form id="taskForm"> 
    <div class="container"> 
     <div class="row" style="margin-top:15px;"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <div class="taskContent"> 
         <div class="row"> 
          <div class="col-lg-4"> 
           <div class="form-group"> 
            <label>Date Range<sup class="text-danger">*</sup></label> 
            <div class="input-group"> 
             <input type="text" class="form-control flatpickr" placeholder="Select Date"> 
             <div class="input-group-addon"> 
              <span class="glyphicon glyphicon-calendar"></span> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <hr> 
        </div> 
        <div id="taskEmpty"> 
        </div> 
        <div class="row"> 
         <div class="col-lg-1 pull-right text-right"> 
          <h1 class="glyphicon glyphicon-plus-sign" id="addTask" style="color:#32c24d;cursor:pointer;"></h1> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-12 col-md-12 text-center"> 
          <button type="submit" class="btn btn-primary btn-submit">Create</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

、ここでは、スクリプトここ

flatpickr(".flatpickr", { 
    enableTime: true, 
    altInput: true, 
    altFormat: "j- M- Y h:i K", 
    "mode": "range" 
}); 

$("#addTask").on("click", function(event) { 
    event.stopPropagation(); 
    var clone = $(".taskContent").clone(); 
    $("#taskEmpty").html(clone); 
    //initialize date again 
    flatpickr(".flatpickr", { 
     enableTime: true, 
     altInput: true, 
     altFormat: "j- M- Y h:i K", 
     "mode": "range" 
    }); 

}); 

事前にfiddle

のおかげである

それはflatpickrを呼び出すようになります

Answer 1

（ "flatpickr。"）;重複したインスタンスを作成します。

const fpConf = { 
enableTime: true, 
altInput: true, 
altFormat: "j- M- Y h:i K", 
"mode": "range", 
wrap: true, 
allowInput: true 
}; 

var clone = $(".taskContent").clone(); 

flatpickr(".taskContent .input-group", fpConf); 

$("#addTask").on("click", function(event){ 
event.stopPropagation(); 

const newClone = clone.clone(); 
$("#taskEmpty").append(newClone); 
$(newClone).find(".input-group").flatpickr(fpConf); 
}); 

この問題は、chmln flatpickerプラグインの作成者によって固定します。 彼に感謝します。素晴らしい仕事.....