Foros del Web » Programando para Internet » Jquery »

Problema al inhabilitar fecha en DataPicker

Estas en el tema de Problema al inhabilitar fecha en DataPicker en el foro de Jquery en Foros del Web. Hola a todos, necesito ayuda para solucionar un problema. Tengo dos elementos input en los cuales voy a seleccionar con la ayuda de DataPicker de ...
  #1 (permalink)  
Antiguo 22/05/2016, 08:14
 
Fecha de Ingreso: abril-2015
Mensajes: 11
Antigüedad: 9 años
Puntos: 0
Exclamación Problema al inhabilitar fecha en DataPicker

Hola a todos, necesito ayuda para solucionar un problema. Tengo dos elementos input en los cuales voy a seleccionar con la ayuda de DataPicker de JqueryUI la fecha inicial y la fecha final de un rango que necesito, por ejemplo el código que a continuación mostraré es para guardar las fechas de las vacaciones de navidad de un colegio. Por lo tanto tengo establecido en el primer input que cuando lo seleccione se abra un calendario mostrando dos meses, en este caso aparecería el mes de Diciembre del año anterior (por ejemplo 2015) y el mes de Enero del siguiente año (2016). Luego una vez seleccionada una fecha por ejemplo en el primer input, se pasa el foco directamente al segundo input y se inhabilita los días anteriores a la fecha seleccionada anteriormente para que no se pueda elegir una fecha anterior a esa en el segundo input.

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:
     
      var data1 = $("#fin_navidad").datepicker('getDate');
      if(data1){
        data1.setDate(data1.getDate()  );
        $("#inicio_navidad").datepicker('option', 'maxDate', data1);
      }
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):

Código:
 var data1 = $("#inicio_navidad").datepicker('getDate');
  if(data1){
    data1.setYear(data1.getFullYear()-1 ); 
    $("#fin_navidad").datepicker('option', 'minDate', data1);
  }
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.

En https://jsfiddle.net/JMMS_85/c4zj8kLb/1/ podéis comprobar lo que os comento y agradecería muchísimo vuestra ayuda.

Etiquetas: datapicker, jquery-ui
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:36.