I can not get the following code to work properly for me if you did not comment on the line link ">.
What I'm doing is a test that I must 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 not get it.
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>