Question

正如您所看到的，这是我的第一个问题，但不是我第一次访问stackoverflow。如果我做错了，请耐心等待。

我的问题如下：我在boostrap模式上遇到bootstrap-datepicker问题。我打开一个模态来编辑一些数据，所以我使用'show.bs.modal'事件在模态上加载数据。模态中的一个字段是出生日期，我使用bootstrap-datepicker。当我点击datepicker字段时，奇怪的行为就开始了。它触发'hide.bs.modal'事件，我在关闭模态之前用它来清理数据（重置验证器和表单）。

我已经尝试了一切，我到处搜索，但仍然没有找到我做错了什么。请帮助我！

我正在使用Bootstrap v3.3.7和Datepicker for Bootstrap v1.7.0

这是一个显示问题的摘录：

$(document).on('hide.bs.modal', '#editModal', function (e){
    alert("Why is this happening??!!!");
    $('#formEdit').data('bootstrapValidator').resetForm();
    $('#formEdit')[0].reset();
});

$('#fecha_nac').datepicker({
    format: 'dd-mm-yyyy',
    autoclose: true,
    language: 'es'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Ver y editar sacerdote</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form role="form" id="formEdit" action="" method="post">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="form-group col-lg-4">
                <label for="legajo">Legajo</label>
                <input type="text" class="form-control" id="legajo" name="legajo" placeholder="Ingrese legajo">
              </div>
              <div class="form-group col-lg-4">
                <label for="apellido">Apellido</label>
                <input type="text" class="form-control" id="apellido" name="apellido" placeholder="Ingrese apellido">
              </div>
              <div class="form-group col-lg-4">
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese nombre">
              </div>
            </div>
            <div class="row">
              <div class="form-group col-lg-3">
                <label for="fecha_nac">Fecha de nacimiento</label>
                <input type="text" class="form-control" name="fecha_nac" id="fecha_nac" placeholder="DD-MM-AAAA">
              </div>
              <div class="form-group col-lg-3">
                <label class="control-label" for="pais_nac">Pa&iacute;s de nacimiento</label>
                <select name="pais_nac" class="form-control" id="pais_nac">
                    
                </select>
              </div>  
              <div class="form-group col-lg-3">
                <label class="control-label" for="provincia_nac">Provincia de nacimiento</label>
                <select name="provincia_nac" class="form-control" id="provincia_nac">
                    
                </select>
              </div>
              <div class="form-group col-lg-3">
                <label class="control-label" for="dpto_nac">Departamento de nacimiento</label>
                <select name="dpto_nac" class="form-control" id="dpto_nac">
                    
                </select>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-lg-9">
                <label for="domicilio">Domicilio</label>
                <input type="text" class="form-control" name="domicilio" id="domicilio" placeholder="Ingrese domicilio">
              </div> 
              <div class="form-group col-lg-3">
                <label for="cod_postal">C&oacute;digo postal</label>
                <input type="text" class="form-control" name="cod_postal" id="cod_postal" placeholder="CP">
              </div>
            </div>
            <div class="row">
              <div class="form-group col-lg-4">
                <label class="control-label" for="pais_dom">Pa&iacute;s</label>
                <select name="pais_dom" class="form-control" id="pais_dom">
                   
                </select>
              </div>  
              <div class="form-group col-lg-4">
                <label class="control-label" for="provincia_dom">Provincia</label>
                <select name="provincia_dom" class="form-control" id="provincia_dom">
                    
                </select>
              </div>
              <div class="form-group col-lg-4">
                <label class="control-label" for="dpto_dom">Departamento</label>
                <select name="dpto_dom" class="form-control" id="dpto_dom">
                    
                </select>
              </div>  
            </div>
            <div class="row">
              <div class="form-group col-lg-4">
                <label class="control-label" for="sexo">Sexo</label>
                <select name="sexo" class="form-control" id="sexo">
                <option value="">-Seleccione sexo-</option>
                <option value="M" selected>Masculino</option>
                <option value="F">Femenino</option>
                
                </select>
              </div>
              <div class="form-group col-lg-4">
                <label class="control-label" for="tipo_documento">Tipo documento</label>
                <select name="tipo_documento" class="form-control" id="tipo_documento">
                  
                </select>
              </div>
              <div class="form-group col-lg-4">
                <label class="control-label" for="nro_documento">N&uacute;mero de documento</label>
                <input type="text" class="form-control" name="nro_documento" id="nro_documento" placeholder="Ingrese documento">
              </div>
            </div>
            <div class="row">
              <div class="form-group col-lg-4">
                <label class="control-label" for="email">Email</label>
                <input type="email" class="form-control" name="email" id="email" placeholder="correo@ejemplo.com">
              </div>
              <div class="form-group col-lg-4">
                <label class="control-label" for="tel_fijo">Tel&eacute;fono fijo</label>
                <input type="tel_fijo" class="form-control telefono" name="tel_fijo" id="tel_fijo" placeholder="Tel&eacute;fono fijo">
              </div>
              <div class="form-group col-lg-4">
                <label class="control-label" for="tel_cel">Tel&eacute;fono celular</label>
                <input type="tel_cel" class="form-control telefono" name="tel_cel" id="tel_cel" placeholder="Tel&eacute;fono celular">
              </div>
            </div>
            <div class="row"> 
              <div class="form-group col-lg-12">
                <label class="control-label" for="observaciones">Observaciones</label>
                <textarea class="form-control noresize" rows="5" name="observaciones" id="observaciones"></textarea>
              </div>  
            </div>
            <input type="hidden" name="idPer" id="idPer">
          </div><!-- End div container -->
        </div><!-- End div modal body -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary" id="btnGuardarSacerdote">Guardar</button>
        </div>
      </form><!-- End form -->
    </div><!-- End div modal content -->
  </div><!-- End div modal dialog -->
</div><!-- End modal Edit -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
  Open Modal
</button>

查看jsfiddle

Answer 1

模态中的datepicker存在错误，请参阅此处的问题github。解决方法是捕获datepicker的hide事件并停止事件传播到模态：

$('#fecha_nac').datepicker({
      format: 'dd-mm-yyyy',
      autoclose: true,
      language: 'es'
  }).on('hide', function(e) {
    e.stopPropagation();
  });

更新小提琴：
JSFiddle

单击bootstrap-datepicker时会触发'hide.bs.modal'模态事件

1 个答案: