I can't get the following code to work properly for me if I didn't comment out the line https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js ">.
What I am doing is a test that I need to include in an application that is already using boostrap and this version of jquery.
I want to include the jquery-ui datepicker with boostrap 3.3.6 and I can't.
Thanks for the help.
<!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://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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Si comentó la siguiente linea si funciona correcto el datepicker pero necesito que conviva con esta version de jquery porque estoy tocando una
aplicación que lo utiliza
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
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;
}
</script>
<script>
$(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");
});
});
</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>
1) It is recommended not to use more than one version of jquery, I have eliminated the multiple versions that you had, leaving the most recent in your code.
2) It is important that in order to load the bootstrap js the js associated with the jquery is always loaded first.
3) If for some reason the removal of the old jquery library generates errors in a legacy application (legacy code) you should try to debug what is generating an error since generally the changes between versions (in your case both versions of jquery are close) they are very small and easy to debug.
4) It is not good to force the coexistence of two jquery libraries in your application since generally only one is "heavy" in addition to the obvious duplicity of the code that this generates. It also makes it somewhat impossible to debug and optimize your code.
Here is your example working with the changes that I have mentioned:
Observation: Strictly following your requirement (not recommended because of what I told you before) I have already organized your code with all the changes and to make both versions "coexist" you only need to uncomment the following line in the code that I provided:
I hope to be helpful. All the best!