1

Tengo estos dos campos de tipo fecha, que los utilizo para establecer un periodo de fechas

<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>

Lo que quiero hacer es que en el primer calendario, que es fechaInicio me permita seleccionar hasta dos meses atrás de la fecha actual, no más

y que en el segundo calendario que es la fecha fin, No me deje seleccionar el día anterior al seleccionado en el primer calendario y que pueda seleccionar hasta dos meses después de la fecha actual

tengo este código, pero solo inicializa las fechas,

function validaFechas(){

	$('datetimepicker1').datetimepicker({
      locale: 'es',
	  format: 'L',
	  useCurrent: false
	
	});
	
	$('datetimepicker2').datetimepicker({
      locale: 'es',
	  format: 'L',
	  useCurrent: false
	
	});

}

como puedo hacer esas validaciones?

1 respuesta 1

3

Tienes que setear minDate y maxDate en las opciones del datepicker.

minDate Type: Date or Number or String Default: null The minimum selectable date. When set to null, there is no minimum.

Multiple types supported:

Date: A date object containing the minimum date.
Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period

pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

Puedes ver detalles aquí

Ejemplo en el primero seleccionas la fecha mínima y en al cerrarlo cambias las fechas para el que segundo datepicker empiece un día después de lo seleccionado en el primero y lo muestras:

$('datepicker1').datetimepicker({
      locale: 'es',
      format: 'L',
      useCurrent: false,
      dateFormat: "yy-mm-dd",
      minDate: new Date('2018-04-15'),
onClose: function( selectedDate ) {
            var date2 = $('#datepicker1').datepicker('getDate');
            date2.setDate(date2.getDate()+1);
            $( "#datepicker2" ).datepicker( "option", "minDate", date2);
            window.setTimeout(function(){$('#datepicker2').datepicker('show')},50);
          }

    });

Del mismo modo que se setea minDate se puede modificar maxDate.

Tu Respuesta

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

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