<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
function fmtFecha4(fecha){
dia=fecha.getDate();
mes=fecha.getMonth()+1; // porque los meses empiezan por 0
anio=fecha.getFullYear();
return dia+"/"+mes+"/"+anio;
}
$(document).ready(function() {
$.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"]);
$("#fechamin").datepicker();
$("#fechamax").datepicker({ maxDate: new Date()});
$("#fechamin").datepicker( {
onSelect: function(fecha) {
console.log("select");
}
});
$("#fechamax").datepicker( {
maxDate: new Date()
});
$("#fechamin").on("change", function() {
console.log("change");
var fecha = $("#fechamin").datepicker("getDate");
fecha.setDate(fecha.getDate() + 30);
$("#fechamax").datepicker("setDate", fecha);
});
// Inicializar on un mes desde hoy
var hoy = new Date();
var hacedias = new Date();
hacedias.setDate(hacedias.getDate() - 30);
$("#fechamin").val(fmtFecha4(hacedias));
$("#fechamax").val(fmtFecha4(hoy));
$("#fechamax").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
console.log("Change event");
});
});
</script>
</head>
</body>
<input type="text" id="fechamin" />
<input type="text" id="fechamax" />
</body>
You are overriding the datepicker a lot, you just had to group the functions.
This way the onSelect will work, but the onChange stops working, that's why I've deleted them.