How to reset two calendar type fields to the current date?

Question

How to reset two calendar type fields to the current date?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a form with 4 fields of type text and with two fields of calendar type that when loading the page they show the current date by default, and a button to clean, what I want to do is that by clicking on the button clean the text fields and the date fields are restored with the current date, so do not erase them but if you have already chosen certain dates at the time of clicking, the current date is placed again

These are my date fields

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

This is the function I have to initialize the calendars with the current date

function validaFechas(){

	var maximaFechaFin = new Date();
	var minimoFechaInicio = new Date(maximaFechaInicio.getFullYear(),maximaFechaInicio.getMonth(), maximaFechaInicio.getDate() -92);
	
	$('datetimepicker1').datetimepicker({
      locale: 'es',
	  format: 'L',
	  defaultDate: new Date(),
	  minDate: minimoFechaInicio
	 
	});
	
	$('datetimepicker2').datetimepicker({
      locale: 'es',
	  format: 'L',
	  defaultDate: new Date(),
	  minDate: minimoFechaInicio
	});
   
    $("#datetimepicker1").on("dp.change",function (e){
      
      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();})
    }

and this is the code of the clean button

function limpiaPantalla(){

  validaFechas();
	$(#"cveId").val("");
	$(#"nombreProd").val("");
	$(#"nombreClien").val("");
	$(#"numProd").val("");
	

}

I had the idea to call the function that initializes the calendars within the function of the clean button, and if you clean all the other fields, but DO NOT reset the dates to the current day, keep the dates that I chose

How can I get them to re-establish with the current date? What am I missing? I hope your help thanks

javascript jquery bootstrap datetimepicker

asked by Root93 18.07.2018 в 06:14

source

2 answers

Display data saved in Sqlite would like to know how to turn on a led when the if condition is met (compareArray (ActualUID, User1))

score 0 · Answer 1

After cleaning the fields you set the date back to the datepickers.

function limpiaPantalla(){
    validaFechas();
    $("#cveId").val("");
    $("#nombreProd").val("");
    $("#nombreClien").val("");
    $("#numProd").val("");
    //Campos de fecha
    $("#datetimepicker1").data('DateTimePicker').date(new Date());
    $("#datetimepicker2").data('DateTimePicker').date(new Date());
}

I hope it serves you

score 0 · Answer 2

Once you have cleaned the 4 fields of type text. You make a destoy on the datetimepicker and re-initialize it.

function limpiaPantalla(){
    $("#cveId").val("");
    $("#nombreProd").val("");
    $("#nombreClien").val("");
    $("#numProd").val("");
    $('#datetimepicker1').data("DateTimePicker").destroy();
    $('#datetimepicker2').data("DateTimePicker").destroy();
    var maximaFechaFin = new Date();
    var minimoFechaInicio = new Date(maximaFechaInicio.getFullYear(),maximaFechaInicio.getMonth(), maximaFechaInicio.getDate() -92);

    $('#datetimepicker1').datetimepicker({
      locale: 'es',
      format: 'L',
      defaultDate: new Date(),
      minDate: minimoFechaInicio

    });

    $('#datetimepicker2').datetimepicker({
      locale: 'es',
      format: 'L',
      defaultDate: new Date(),
      minDate: minimoFechaInicio
    });  
}

On the other hand, be careful with assignments in JQuery. You do not do well the assignment to the elements. Remember $("#id") $(".class") $('etiqueta')