[英]bootstrap datetimepicker is not working after clone
我正在使用Bootstrap日期時間選擇器: https : //eonasdan.github.io/bootstrap-datetimepicker/
當我克隆時間輸入字段時,克隆的時間輸入字段不起作用。 你知道為什么嗎? 我該如何解決?
Java腳本
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker({
minDate: new Date(),
format: 'DD-MM-YYYY',
});
$('.datetimepicker3').datetimepicker({
minDate: new Date(),
format: 'hh:mm A',
});
});
的HTML
<div class='input-group date'>
<input type='text' class="form-control mul_pickup datetimepicker3" name="mul_pickup[0][]" placeholder="Pickup Time">
</div>
檢查此示例以克隆datetimepicker。
希望這對您有幫助。
我在文件加載時進行了克隆。 當用戶單擊“添加新”按鈕時,克隆會將datepicker重新應用到克隆的元素,以便將datepicker應用於新添加的元素。
$(function () { var clone = $('.clone').clone().removeClass('clone'); $('.clone').removeClass('clone'); clone = clone.removeClass('clone'); $('.add-new').click(function(){ var new_clone = clone.clone(); // For your solution you need to reapply new_clone.find('.datetimepicker').datepicker({ format: "dd/mm/yyyy", language: "en", autoclose: true, todayHighlight: true }); $(new_clone).insertAfter('.form-group:last'); }); $('.datetimepicker').datepicker({ format: "dd/mm/yyyy", language: "en", autoclose: true, todayHighlight: true }); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <h2>Datetimepicker</h2> </div> <div class="row"> <div class='col-sm-6'> <div class="form-group clone"> <div class='input-group date datetimepicker' > <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <button class='add-new btn btn-default'>Add New </button> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.es.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.