Question

我正在使用Bootstrap日期时间选择器：https://eonasdan.github.io/bootstrap-datetimepicker/

当我克隆时间输入字段时，克隆的时间输入字段不起作用。你知道为什么吗？我该怎么解决？

JavaScript

$(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>

Answer 1

检查此示例以复制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>

克隆后bootstrap datetimepicker不起作用

1 个答案: