0

Tengo dos campos de fecha,

<div class="form-group">
	<div class="input-group date" id="datetimepicker1">
		<input id="fechInicio"  name="fechInicio" class="form-control" type="text"/>
		<span class="input-group-addon">
		  <span class="glyphicon glyphicon-calendar"></span>
		</span>
	</div>
</div>
<div class="form-group">
	<div class="input-group date" id="datetimepicker2">
		<input id="fechFin"  name="fechFin" class="form-control" type="text"/>
		<span class="input-group-addon">
		  <span class="glyphicon glyphicon-calendar"></span>
		</span>
	</div>
</div>

Al cargar la pagina El campo fechIniciomuestra por default la fecha de 3 meses atrás de la fecha que esta seleccionada en el campo fechFin, por default el campo fechFin muestra la fecha actual, por ejemplo hoy 02/08/2018, entonces el campo fechInicio muestra 02/05/2018, y si muevo el campo fechFin, se actualiza el campo fechInicio,

Otra de las funciones que hace es que para el campo fechFin no permite seleccionar una fecha mayor a la fecha actual, y el campo fechInicio, no permite seleccionar una fecha anterior a los 3 meses de la fecha fin, y tampoco permite seleccionar una fecha mayor a la fecha seleccionada en fechFin.

Hace las validaciones que menciono bien, pero las hace cuando primero doy click en el "datetimepicker2", que es el campo fechFin, si yo aquí primero selecciono una fecha, actualiza la otra y aplica las validaciones, pero cuando yo entro a la pagina y quiero seleccionar una fecha del "datetimepicker1", es decir la fecha inicio me deja seleccionar mas dias de la fecha de los 3 meses y después en el otro campo, NO respeta las validaciones, porque me permite seleccionar una fecha mayor al del día actual en el campo fechFiny no es correcto, solo lo hace cuando primero doy click en el"datetimepicker2"`

Esta es mi función, como puedo hacer para que aplique las validaciones al yo seleccionar primero cualquiera de los campos?

function validaFechas(){

	$('datetimepicker1').datetimepicker({
      locale: 'es',
	  format: 'L',
	  useCurrent: false,
      defaultDate: new Date()
	 
	});
	
	$('datetimepicker2').datetimepicker({
      locale: 'es',
	  format: 'L',
	  useCurrent: false,
	  defaultDate: new Date()
	});
    $("#datetimepicker1").on("dp.change",function (e){
      var fechaInicio = new Date(e.date);
      
	  $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
      var maximaFechaFin = new Date();
      maximaFechaFin.setMinutes(1);
      
	  $('#datetimepicker2').data("DateTimePicker").maxDate(maximaFechaFin);
      });
 
     $("#datetimepicker2").on("dp.change",function (e)
    {
       
      $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
      var maximaFechaInicio = new Date();
      var minimoFechaInicio = new Date(maximaFechaInicio.getFullYear(), maximaFechaInicio.getMonth(), maximaFechaInicio.getDate() -92);
      
     $('#datetimepicker1').data("DateTimePicker").minDate(minimoFechaInicio);
     });
      
    }

1
  • Esto es una repetición del código de esta pregunta [es.stackoverflow.com/questions/185128/…? Lo que necesitas se puede hacer con las opciones minDate y maxDate del datepicker, las seteas al declararlo
    – Carmen
    el 2 ago. 2018 a las 20:34

1 respuesta 1

0

Si no puedes inicializar el constructor, como bien dijo carmen, podrías usar una suerte de wrap, y llamarlo desde el window.onload, asi los asocias desde un principio.

  function SetRuleDp2(p1, p2) {
   //Control dp2
    var date1 = $("#datetimepicker1").datepicker('getDate');   
    var maximaFechaFin = new Date();
    maximaFechaFin.setMinutes(1);

    $('#datetimepicker2').data("DateTimePicker").maxDate(maximaFechaFin);    
    $('#datetimepicker2').data("DateTimePicker").minDate(date1);
 } 
 function SetRuleDp1(p1, p2) {
   //Control dp1
     var date2 = $("#datetimepicker2").datepicker('getDate');
     var day2  = date1.getDate(); 
     var month2 = date.getMonth() + 1;              
     var year2 =  date.getFullYear();
     var maxFechaInicio = new Date(year2, month2, day2 - 92);
     $('#datetimepicker1').data("DateTimePicker").maxDate(date2);
     $('#datetimepicker1').data("DateTimePicker").minDate(maxFechaInicio);
 }   
window.onload = function() {
     SetRuleDp1(); 
     SetRuleDp2(); 
 }  
 $("#datetimepicker2").on("dp.change",function (e){
     SetRuleDp1();      
 });
  $("#datetimepicker1").on("dp.change",function (e){
     SetRuleDp2();      
 });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.