A
(1) It is advisable not to use more than one version of jquery, I have removed the multiple versions you had leaving the most recent in your code. (2) It is important that to load the bootstrap js always load before the js associated with jquery.(3) If for any reason the removal of the old jquery library generates errors in a legacy application (legacy code) you should try to purify that it is generating error since usually the changes between versions (in your case are close both jquery versions) are very small and easy to clean. (4) It is not good to force the co-existence of two jquery bookstores in your application since generally a single is "fished" in addition to the obvious duplicity of the code that this generates. It also precludes to some extent the debugging and optimization of your code. Here's your example working with the changes I've told you:var RANGO_DIAS=30; // 30 ultmos días
///////////////////////////////////////////////////////////
/* Limite de fechas por defecto */
///////////////////////////////////////////////////////////
function limitePorDefecto(){
var hoy = new Date();
var hacedias = new Date();
hacedias.setDate(hacedias.getDate() - RANGO_DIAS);
$("#dpFechaMinima").val(fmtFecha4(hacedias));
$("#dpFechaMaxima").val(fmtFecha4(hoy));
}
///////////////////////////////////////////////////////////
/* Formatear fecha tipo date en formato dd/MM/YYYY */
///////////////////////////////////////////////////////////
function fmtFecha4(fecha){
dia=fecha.getDate();
mes=fecha.getMonth()+1; // porque todos los meses empiezan por 0
dia=String("00" + dia).slice(-2); // returns 01
mes=String("00" + mes).slice(-2); // returns 01
anio=fecha.getFullYear();
return dia+"/"+mes+"/"+anio;
}
$(document).ready(function () {
// Establece un limite por defecto de 30 dias
limitePorDefecto();
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '< Mes anterior',
nextText: 'Mes Siguiente >',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mie','Juv','Vie','Sab'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
showOtherMonths: true,
selectOtherMonths: true,
//showOn: "button",
//Lo comentado es porque se utiliza CSS para poder el icono
//buttonImage: "img/calendar.gif",
//buttonImageOnly: true,
buttonImage: "",
buttonImageOnly: false,
buttonText: ""
};
$.datepicker.setDefaults($.datepicker.regional["es"]);
// Por defecto se muestra un dia con LIMITE_POR_DEFECTO
$("#dpFechaMinima").datepicker( {
onSelect: function(fecha) {
var fecha = $("#dpFechaMinima").da
var fecha = $("#dpFechaMinima").datepicker("getDate");
console.log ("fecha onSelect:" + fecha)
}
}).on("change", function() {
var fecha = $("#dpFechaMinima").datepicker("getDate");
console.log ("fecha:" + fecha)
if( !fecha){
limitePorDefecto();
} else {
fecha.setDate(fecha.getDate() + RANGO_DIAS);
$("#dpFechaMaxima").datepicker("setDate", fecha);
}
});
// Maxima fecha del limite máximo es la fecha actual
$("#dpFechaMaxima").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
},
maxDate: new Date()
}).on("change", function() {
console.log("Change event");
});
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker and Boostrap not working ok</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="contenedorSeleccion" class="container">
<div class="row">
<div class="control-group col-md-2">
<label for="dpFechaMinima" class="control-label">DESDE FECHA</label>
<div class="controls">
<div class="input-group">
<label for="dpFechaMinima" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="dpFechaMinima" type="text" class="date-picker form-control" placeholder="dd/mm/aaaa" maxlength="10" size="10px" />
</div>
</div>
</div>
<div class="control-group col-md-2">
<label for="dpFechaMaxima" class="control-label">HASTA FECHA</label>
<div class="controls">
<div class="input-group">
<label for="dpFechaMaxima" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="dpFechaMaxima" type="text" class="date-picker form-control" placeholder="dd/mm/aaaa" maxlength="10" size="10px" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>Observation: In strict compliance with your requirement (not recommended by what I've done to you before) I have already organized your code with all the changes and to make "convive" both versions only you need to decompose the following line in the code I provided to you:<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
I hope it's helpful. A greeting!