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