Todo eso lo consigo con el siguiente código:
Código:
$.datepicker.regional['es'] = { minDate: new Date(2015, 8, 10), closeText: 'Cerrar', prevText: '<Ant', nextText: 'Sig>', 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','Mié','Juv','Vie','Sáb'], dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], weekHeader: 'Sm', dateFormat: 'dd/mm/yy', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: '' }; $.datepicker.setDefaults($.datepicker.regional['es']); $("#inicio_navidad").datepicker({ changeMonth: false, numberOfMonths: 2, dateFormat:"d MM ", minDate: new Date(2015, 11, 1), maxDate: new Date(2016, 0, 31), onClose: function( selectedDate ) { var data1 = $("#inicio_navidad").datepicker('getDate'); if(data1){ data1.setYear(data1.getFullYear()-1 ); $("#fin_navidad").datepicker('option', 'minDate', data1); } if($("#inicio_navidad").val()!="" && $("#fin_navidad").val()==""){ $("#fin_navidad").focus(); } var dato=$(this).attr("id").split("_"); if((!$("#ui-datepicker-div").is(":visible")) && ($("#inicio_"+dato[1]).val()=="" || $("#inicio_"+dato[1]).val()==" " || $("#fin_"+dato[1]).val()=="" || $("#fin_"+dato[1]).val()==" ")){ $("#inicio_"+dato[1]).val(""); $("#fin_"+dato[1]).val(""); $("#inicio_"+dato[1]).datepicker('option', 'minDate', new Date(2015, 11, 1)); $("#inicio_"+dato[1]).datepicker('option', 'maxDate', new Date(2016, 0, 31)); $("#fin_"+dato[1]).datepicker('option', 'minDate', new Date(2015, 11, 1)); $("#fin_"+dato[1]).datepicker('option', 'maxDate', new Date(2016, 0, 31)); } } }); $("#fin_navidad").datepicker({ changeMonth: false, numberOfMonths: 2, dateFormat:"d MM ", minDate: new Date(2015, 11, 1), maxDate: new Date(2016, 0, 31), onClose: function( selectedDate ) { var data1 = $("#fin_navidad").datepicker('getDate'); if(data1){ data1.setDate(data1.getDate()); $("#inicio_navidad").datepicker('option', 'maxDate', data1); } if($("#fin_navidad").val()!="" && $("#inicio_navidad").val()==""){ $("#inicio_navidad").focus(); } var dato=$(this).attr("id").split("_"); if((!$("#ui-datepicker-div").is(":visible")) && ($("#inicio_"+dato[1]).val()=="" || $("#inicio_"+dato[1]).val()==" " || $("#fin_"+dato[1]).val()=="" || $("#fin_"+dato[1]).val()==" ")){ $("#inicio_"+dato[1]).val(""); $("#fin_"+dato[1]).val(""); $("#inicio_"+dato[1]).datepicker('option', 'minDate', new Date(2015, 11, 1)); $("#inicio_"+dato[1]).datepicker('option', 'maxDate', new Date(2016, 0, 31)); $("#fin_"+dato[1]).datepicker('option', 'minDate', new Date(2015, 11, 1)); $("#fin_"+dato[1]).datepicker('option', 'maxDate', new Date(2016, 0, 31)); } } });
El problema que hay es que cuando selecciono una fecha en el primer input y luego selecciono la otra en el segundo input, la primera se modifica y pasa a tener el valor de la segunda y el problema viene en lo siguiente:
Una vez seleccionada una fecha de uno de los input se establece un minDate o maxDate para inhabilitar los días anteriores y posteriores a la otra fecha con éste código:
Código:
Pero el problema es que para el caso de la fecha de Diciembre, al realizar eso con el minDate para el segundo input, se obtiene la misma fecha pero con el año actual, en lugar de obtener por ejemplo el 20-12-2015 se obtiene el 20-12-2016 y así luego en el segundo input aparecería todo inhabilitado. Para intentar solucionar esto, aunque no entiendo mucho del tema me puse a probar y cambie el código por este otro (este es el código que aparece en código inicial ya modificado):var data1 = $("#fin_navidad").datepicker('getDate'); if(data1){ data1.setDate(data1.getDate() ); $("#inicio_navidad").datepicker('option', 'maxDate', data1); }
Código:
Así que el problema de que se cambie el valor del primer input al modificar el segundo, debe ser por ese cambio de código que hice para poder obtener la fecha con el año correcto, y no sé como obtenerla de otra forma. Lo curioso de todo es que si se selecciona las fechas al contrario, es decir primero se selecciona la fecha en el segundo input y luego en el primero si se realiza todo correcto y se puede ver como se inhabilita los días correspondiente para cada calendario. var data1 = $("#inicio_navidad").datepicker('getDate'); if(data1){ data1.setYear(data1.getFullYear()-1 ); $("#fin_navidad").datepicker('option', 'minDate', data1); }
En https://jsfiddle.net/JMMS_85/c4zj8kLb/1/ podéis comprobar lo que os comento y agradecería muchísimo vuestra ayuda.