Bootstrap datepicker en modal no funciona

Deseamos brindarte la mejor información que descubrimos online. Nosotros esperamos que te sirva de ayuda y si deseas aportar alguna mejora siéntete libre de hacerlo..

Solución:

El selector de fecha se esconde detrás del modal.

Establecer selector de fechas z-index por encima del modal que es 1050.

Además, envuelva su código de selección de fechas en el evento modal mostrado de bootstrap.

$('#myModal').on('shown.bs.modal', function() 
  $('.input-group.date').datepicker(
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  );
);

$("[id=add]").click(function() 
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('


Date Required
');
  $("#myModal").modal("show");
);

  Add


  

    

      

        

      
      

      
    
  

Nota: Agregué bootstrap v3.3.6 CSS y eliminé la referencia local al script tablesorter para la demostración.

Bueno, tienes que llamar al selector de fecha después de cargar modal:

$("[id=add]").click(function() 

  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('


Date Required