Question

我见过很多关于添加和删除普通文本字段的示例。 BUt on date picker我遇到了问题。

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

我想添加多个日期，以便我可以动态地添加新日期字段。并删除。有很多例子只用于添加。

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

我使用的是bootstrap日期选择器，而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);
});

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

1 个答案: