0

Tengo un formulario con 4 campos de tipo texto y con dos campos de tipo calendario que al cargar la pagina estos muestran la fecha actual por default, y un botón de limpiar, lo que quiero hacer es que al dar clic en el botón limpie los campos de texto y los campos de fecha se restablezcan con la fecha actual, osea que no los borre sino que si ya escogí ciertas fechas al momento de dar clic se coloque la fecha actual nuevamente

Estos son mis 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>

Esta es la función que tengo para inicializar los calendarios con la fecha actual

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();})
    }

y este es el código del botón de limpiar

function limpiaPantalla(){

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

}

se me ocurrió mandar a llamar la función que inicializa los calendarios dentro de la función del botón de limpiar, y pues si me limpia todos los demás campos, pero NO restablece las fechas a la del día actual, se queda con las fechas que escogí

Como le puedo hacer para que se vuelvan a establecer con la fecha actual? que me falta? Espero su ayuda gracias

2 respuestas 2

0

Tras limpiar los campos le seteas la fecha de nuevo a los 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());
}

Espero que te sirva

2
  • ya lo probé y lo hace pero hasta el segundo clic en el botón, en el primer clic solo limpia los demás campos
    – Root93
    el 18 jul. 2018 a las 16:24
  • Me acabo de dar cuenta que tenía mal las comillas, no se si las pusiste bien antes de hacerlo. Prueba a añadir la dos líneas dentro de la función validaFechas() que ejecutas al principio.
    – Carmen
    el 18 jul. 2018 a las 20:02
0

Una vez que has limpiado los 4 campos de tipo texto. Realizas un destoy sobre el datetimepicker y lo vuelves a inicializar.

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
    });  
}

Por otro lado, ten cuidado con las asignaciones en JQuery. No realizas bien la asignación a los elementos. Recuerda $("#id") $(".class") $('etiqueta')

6
  • ¿por qué destruir y volver a crear los elementos si sólo quieres cambiar el valor? en mi opinión es una forma poco eficaz de usar los recursos
    – Carmen
    el 18 jul. 2018 a las 8:24
  • Toda la razón. simplemente setteando la fecha sería suficiente. Elimino la respuesta?
    – jld
    el 18 jul. 2018 a las 12:52
  • No es necesario eliminar una respuesta si crees que es válida, funcionar va a funcionar, sólo que tiene más sentido destruir un elemento si ya no va a usarse :)
    – Carmen
    el 18 jul. 2018 a las 14:35
  • @Jorge ya lo probé pero no hace nada y manda este mensaje en la consola del navegador: Uncaught TypeError Cannot read property destroy of undefined
    – Root93
    el 18 jul. 2018 a las 17:09
  • @Root93 cual es el datetimepicker que estas utilizando? eonasdan?
    – jld
    el 19 jul. 2018 a las 10:10

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.