Bootstrap Datepicker 动态表单字段添加和删除

Question

我见过很多关于添加和删除普通文本字段的示例。但是在日期选择器上我遇到了问题。

我有这些代码可以选择日期。

我想添加多个日期，以便我可以动态地添加新的日期字段。并且还删除。有很多例子只是为了添加。

<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();
});

我正在使用引导日期选择器，引导版本是 3.3.6。

提前致谢。

Answer 1

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

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