I am using modals, datetimepicker and selectpicker in a single project and I managed to make everything work together in the following way
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Estado Financiero</title>
<link rel="stylesheet" type="text/css" href="librerias/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="librerias/alertifyjs/css/alertify.css">
<link rel="stylesheet" type="text/css" href="librerias/alertifyjs/css/themes/default.css">
<link rel="shortcut icon" type="image/x-icon" href="img/triibu.ico"><!--Mentemos el icono de tribu para la pestaña-->
<link rel="stylesheet" href="fonts/fonts.css"><!--llamamos los estilos para los iconos-->
<!-- LINKS PARA DATEPICKER BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><!--TAMBIEN SE USA PARA EL SELECTPICKER DE BOOTSTRAP-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<!-- TERMINA LINKS PARA DATEPICKER BOOTSTRAP -->
<link rel="stylesheet" href="css/main.css"><!--llamamos a los estilos css-->
<script src="librerias/jquery-3.2.1.min.js"></script>
<script src="librerias/bootstrap/js/bootstrap.js"></script>
<script src="librerias/alertifyjs/alertify.js"></script>
<!--SCRIPTS Y LINK PARA SELECTPICER DE BOOTSTRAP-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!--TERMINA SCRIPTS Y LINK PARA SELECTPICER DE BOOTSTRAP-->
<!--SCRIPTS PARA DATEPICKER DE BOOTSTRAP-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<!--TERMINA SCRIPTS PARA DATEPICKER DE BOOTSTRAP-->
</head>
<body>
<div class="container" >
<br/><ul class="nav nav-tabs">
<li class="active"><a href="#Resumen" data-toggle="pill" >Resumen Financiero</a></li>
<li><a href="#Ingresos" data-toggle="pill" >Ingesos</a></li>
<li><a href="#Egresos" data-toggle="pill" >Egresos</a></li>
</ul>
<div class="tab-content">
<div id="Resumen" class="tab-pane fade in active">
<div id="tablaResumen"></div>
</div>
<div id="Ingresos" class="tab-pane fade">
<div id="tablaIngresos"></div>
</div>
<div id="Egresos" class="tab-pane fade">
<div id="tablaEgresos"></div>
</div>
</div>
</div>
<!-- EMPIEZA Modal para registros nuevos -->
<div class="modal fade" id="modaladdCuota" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Agregar</h4>
</div>
<div class="modal-body">
<form action="" accept-charset="utf-8" name="form_add_cuota" id="form_add_cuota">
<label>Inmueble(s):</label>
<select name="inmueble_add" id="inmueble" class="form-control selectpicker" data-live-search="true" data-actions-box="true" data-selected-text-format="count > 3" multiple required>
<?php
if (!empty($inmuebles)) {
foreach ($inmuebles as $inmueble) {
?>
<option value="<?php echo $inmueble[1]; ?>"><?php echo $inmueble[2]; ?></option>
<?php }} ?>
</select>
<input type="hidden" name="hidden_inmueble" id="hidden_inmueble">
<label>Fecha del Cargo/Cuota:</label>
<input type="text" name="date_add" id="datepicker1" class="form-control" required data-value-missing="This field is required!" />
<label>Fecha límite de pago:</label>
<input type="text" name="limite_add" id="datepicker2" class="form-control" required>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="new_cuota" data-backdrop="false" >Enviar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</form>
</div>
</div><!--CIERRA MODAL CONTENT FADE-->
</div><!--CIERRA MODAL DIALOG FADE-->
</div><!--CIERRA DIV MODAL FADE-->
<!-- TERMINA Modal para registros nuevos -->
</body>
</html>
<script type="text/javascript">
/*FUNCIONES PARA CARGAR COMPONENTES*/
$(document).ready(function() {
$('#tablaResumen').load('componentes/tablaResumen.php');/*FUNCION PARA CARGAR LA TABLA */
$('#tablaIngresos').load('componentes/tablaIngresos.php');/*FUNCION PARA CARGAR LA TABLA */
$('#tablaEgresos').load('componentes/tablaEgresos.php');/*FUNCION PARA CARGAR LA TABLA */
$('#inmueble').change(function(){//funcion para guardar en hidden_inmueble todas las selecciones de inmueble picker
$('#hidden_inmueble').val($('#inmueble').val());
});
/*TERMINA FUNCIONES PARA CARGAR COMPONENTES*/
//FUNCION PARA CARGAR EL DATEPICKER
var $jQuery_1_11_3 = jQuery.noConflict();
$jQuery_1_11_3(document).ready(function() {
$('#datepicker1').datetimepicker({
format: 'YYYY/MM/DD', /*formato fecha (eliminar si queremos tambien horas)*/
//minDate: new Date(), /*fechas anteriores a "hoy" no se pueden seleccionar*/
});
$('#datepicker2').datetimepicker({
format: 'YYYY/MM/DD',
useCurrent: false //Important! See issue #1075
});
//SE DEFINE QUE NO SE PUEDEN PONER FECHAS ANTERIORES A LAS DEL DATEPICKER 1 EN EL DATEPICKER2
$("#datepicker1").on("dp.change", function (e) {
$('#datepicker2').data("DateTimePicker").minDate(e.date);
});
$('#datepicker3').datetimepicker({
format: 'YYYY/MM/DD', /*formato fecha (eliminar si queremos tambien horas)*/
minDate: new Date(), /*fechas anteriores a "hoy" no se pueden seleccionar*/
});
$('#datepicker4').datetimepicker({
format: 'YYYY/MM/DD', /*formato fecha (eliminar si queremos tambien horas)*/
//minDate: new Date(), /*fechas anteriores a "hoy" no se pueden seleccionar*/
});
});
//FUNCION PARA CARGAR EL SELECTPICKER
var $jQuery_3_1_0 = jQuery.noConflict();
$jQuery_3_1_0(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
If you notice in the header, I repeat bootstrap.min.js twice, try to accommodate but if I move or remove any of them, the datetimepicker or the selectpicker stops working. And now that I want to add an Accordion like the one shown below, the collapse does not work correctly (if it opens but no longer closes it) and what I saw in forums is due to the way to call jquery. So my question is how should the head be accommodated for the selectpicker, the datetimepicker and the Accordion to work properly?
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
The accordion example was obtained from link , the datetimepicker got it from link and the selectpicker of link