1

Quiero poder seleccionar una fecha enSOAT_DESDE con el calendariotcal y que automáticamente en SOAT_HASTA me muestre la fecha un año después. El código que tengo hasta el momento es el siguiente:

SCRIPT

var fecha1 = document.getElementById("SOAT_DESDE");
var fecha2 = document.getElementById("SOAT_HASTA");

function calcular(){
    var hoy = new Date();
    var dias = parseInt(364);
    var calculado = new Date();
    calculado.setDate(hoy.getDate() + dias);
    fecha2.innerText = calculado.getFullYear() + '/' +
(calculado.getMonth() + 1) + '/' + calculado.getDate();

HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="tcal.css" />
    <script type="text/javascript" src="tcal.js"></script>

<td>
    Desde:
    <input type="text" name="SOAT_DESDE" id="SOAT_DESDE" class="tcal"/>
    Hasta:
    <input type="text" name="SOAT_HASTA" id="SOAT_HASTA" class="tcal"/>
</td>
4
  • Podrias darme el CDN de tus archivos? para poder ayudarte Commented el 23 mar. 2018 a las 17:55
  • Ya lo puse en la pregunta
    – Anderviver
    Commented el 23 mar. 2018 a las 18:05
  • Los archvios tcal.css y tcal.js no estan.. Commented el 23 mar. 2018 a las 18:06
  • Son necesarios? esa simplemente son una librerías para llamar el calendario, te comento que también tengo otros campos en los que necesito llamar la fecha normal.
    – Anderviver
    Commented el 23 mar. 2018 a las 18:10

2 respuestas 2

1

He puesto por defecto la fecha de hoy en tu input SOAT_DESDE para hacerlo más rápido (puedes cambiar la fecha si deseas para probarlo).

El código quedaría así:

function calcular() {
  // Inputs
  var fecha1 = document.getElementById("SOAT_DESDE");
  var fecha2 = document.getElementById("SOAT_HASTA");

  // Fechas
  var calculado = new Date(fecha1.value);
  calculado.setDate(calculado.getDate() + 365);

  fecha2.value = 
    calculado.getFullYear() + '/' +
    (calculado.getMonth() + 1) + '/' + 
    calculado.getDate();
}
Desde:
<input type="text" name="SOAT_DESDE" id="SOAT_DESDE" class="tcal" value="2018/03/23"/>
Hasta:
<input type="text" name="SOAT_HASTA" id="SOAT_HASTA" class="tcal"/>
<button id="btnCalcular" onclick="calcular()">Calcular</button>

Ten en cuenta que:

  • He agregado un botón para realizar el cálculo.
  • No es necesario usar parseInt en algo que de por sí ya es un entero: 364, de hecho, lo estoy pasando directamente al cálculo.
  • No necesitas dos fechas para realizar el cálculo. Simplemente usas setDate() para aumentar los días en la misma fecha.
  • Ya que estás trabajando con inputs, lo correcto sería usar fecha2.value en vez de fecha2.innerText.
3
  • Master me surgio una duda comparando tu solución y la mía.. si te fijas, al día también tuve que sumarle un 1, sin embargo tú no lo haces. En que se diferencia? Commented el 23 mar. 2018 a las 19:21
  • Hola @PauloUrbanoRivera, uhmmm, no estoy seguro: new Date('2018/03/01').getDate() da como resultado 1. En cambio a new Date('2018/03/01').getDate() si hay que hacerle un +1 ya que retorna 2
    – César
    Commented el 23 mar. 2018 a las 19:29
  • Cosas de programación jaajaj.. Excelente semana colega! Commented el 26 mar. 2018 a las 12:52
0

Complementando la respuesta del colega César (ya que en tu pregunta indicas que deseas que se haga automáticamente), te adjunto mi solución:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  </head>

  <body>
    Desde:
    <input type="date" name="SOAT_DESDE" id="SOAT_DESDE" />
    Hasta:
    <input type="date" name="SOAT_HASTA" id="SOAT_HASTA" />
  </body>
  <script>
      $('#SOAT_DESDE').on('change', function(){
    var myDate = new Date($(this).val());
    var customDate = document.getElementById("SOAT_HASTA");
    var format = (myDate.getFullYear() + 1) + '-' + ('0' + (myDate.getMonth() + 1)) + '-' + ('0' + (myDate.getDate() + 1)).slice(-2);
    $('#SOAT_HASTA').val(format); 
  })
    </script>
</html>

A los meses y días se les suma (+1) porque ambos parten de base cero

Saludos!

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.