Bootstrap Datepicker动态表单域添加和删除

Question

我见过很多关于添加和删除普通文本域的例子。在日期选择器BUT我得到了问题。

我有这些代码来选择日期。

我想添加多个日期，所以我如何动态地新的日期字段。并删除。有许多只用于添加的示例。

<div class="form-group"> 
              <label class="control-label col-md-3">Dates</label> 
              <div class="col-md-2"> 

               <input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="" /> 
               <span class="help-block">Choose a date </span> 
              </div> 
              <div class="col-md-1"> 
               <div class="input-group"> 

                <span class="input-group-btn"> 
      <button id="plus" class="btn btn-success" type="button" name="add"> 
      <i class="glyphicon glyphicon-plus"></i> 
      </button> 
      </span> 

               </div> 

              </div> 
             </div> 

我得到这些代码正常工作的正常文本字段动态添加。

var template = '<div class="input-group"><input type="text" class="form-control"/></div>', 
    minusButton = '<span class="btn input-group-addon delete-field">(-)</span>'; 

$('.add-field').click(function() { 
    var temp = $(template).insertBefore('.help-block'); 
    temp.append(minusButton); 
}); 

$('.fields').on('click', '.delete-field', function(){ 
    $(this).parent().remove(); 
}); 

我使用的引导日期选择器和bootsrap版本是3.3.6。

在此先感谢。

Answer 1

将元素插入DOM后，您可以将datepicker附加到该元素。

$('.add-field').click(function() { 
    var temp = $(template).insertBefore('.help-block'); 
    temp.find("input[type=text]").datetimepicker(); 
    temp.append(minusButton); 
});