How to set a date limit to select on a datetimepicker?

Question

How to set a date limit to select on a datetimepicker?

Navigation

#1 by (1 votes)

0

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

I have two date fields, which I want to show the current date by default when loading the page, and that when selecting a date in the first calendar for example 06/20/2018, in the second calendar DO NOT allow me to choose a day before the one that was chosen in the first calendar, that is on 06/19/2018 and that I did not let me select a day after the current day.

Likewise I want the first calendar to only allow me to select up to three months after the day I select in my second calendar, for example if in the second calendar I select the date of today 06/27/2018, in the first calendar just let me choose until 03/27/2018 NO later.

I have the following code that shows me the current date in both calendars, and if in the first calendar it selects 6/25/18, then in the second calendar it does NOT let me choose the days after 5/25/18 and Ok, that's what I want, but what it does NOT do is that it does not respect the period of the three months that I can choose backwards in the first calendar

function validaFechas(){

	$('datetimepicker1').datetimepicker({
      locale: 'es',
	  format: 'L',
	  defaultDate: new Date()
	 
	});
	
	$('datetimepicker2').datetimepicker({
      locale: 'es',
	  format: 'L',
	  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);
      });
      $("#fechInicio").keypress(function(evt){evt.preventDefault();})
      $("#fechFin").keypress(function(evt){evt.preventDefault();})
    }

Why do not you respect the validation of the days back on my first calendar? How else can I do it?

I tried removing the defaultDate in the datetimepicker1, and already respects that validation, it only lets me scan until 3/27/18, but it does not show the current date when the page starts

java javascript jquery datetimepicker

asked by Root93 28.06.2018 в 05:22

source

1 answer

How to validate several empty txt? How to show names of a list in a MessageBox?

score 1 · Accepted Answer

Because you do not try putting the minDate to the datepicker from the beginning, that is, the valid functionFechas you start it like this:

var maximaFechaInicio = new Date();
var minimoFechaInicio = new Date(maximaFechaInicio.getFullYear(), 
maximaFechaInicio.getMonth(), maximaFechaInicio.getDate() -92);

$('datetimepicker1').datetimepicker({
  locale: 'es',
  format: 'L',
  defaultDate: new Date(),
  minDate: maximaFechaInicio
});