引导日期选取器动态表单字段添加和删除

Bootstrap Datepicker dynamic form field add and remove

本文关键字：字段 添加 删除 表单 动态 日期 选取      更新时间：2023-09-26

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

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

我想添加多个日期，以便如何动态地添加新日期字段。并且还要删除。有很多 xamples 仅用于添加。

<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。

提前谢谢。

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

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