4

Tengo el siguiente problema:

Tengo este formulario en HTML:

<table>
 <tr>
    <td>Fecha de Salida:</td>
    <td><input name="fecha_sali" id="fecha_sali" type="text"></td>
 </tr>
 <tr>
    <td>Días:</td>
    <td><input name="fechsa" id="fechsa" type="text" value="60"></td>
</tr> 
<tr>
    <td>Fecha de pago:</td>
    <td><input name="pago" id="total" type="text">

  <input class="md-trigger boton" type="button" value="Calcular" onclick="aumenta(this.form)" /></td>
</tr>

Y luego uso el siguiente código Javascript para sumar los 60 días a la fecha de salida:

function aumenta(frm) { 
  num=frm.fechsa.value; 
  f=frm.fecha_sali.value; 
  // pasaremos la fecha a formato mm/dd/yyyy 
  f=f.split('/'); 
  f=f[1]+'/'+f[0]+'/'+f[2]; 
  // 
  hoy=new Date(f); 
  hoy.setTime(hoy.getTime()+num*24*60*60*1000); 
  mes=hoy.getMonth()+1; 
  if(mes<9) mes='0'+mes; 
  fecha=hoy.getDate()+'/'+mes+'/'+hoy.getFullYear(); 
  frm.total.value=fecha;   
} 

El problema es que el código Javascript solo funciona cuando el input es type='text' y cuando lo cambio a input type='date' no funciona el cálculo.

¿Como podría solucionar ese problema?

2 respuestas 2

3

Los input type="date" aceptan y devuelven un valor en formato YYYY-MM-DD.

Teniendo esto en cuenta, podrías hacer lo siguiente:

  • Crear un objeto fecha a partir del valor del input fecha_sali
  • Usar Date.setDate() para sumar la cantidad de días a la fecha.
  • Para obtener el día, mes y año, sin importar la zona horaria, es recomentable usar los metodos getUTC*()
  • Establecer el valor del input total utilizando el formato correcto.

Ejemplo:

function aumenta(frm) {
  let num = parseInt(frm.fechsa.value);
  // la fecha viene en formato yyyy-mm-dd
  let f = frm.fecha_sali.value;

  let fecha = new Date(f);
  fecha.setDate(fecha.getDate() + num);

  //
  let mes = fecha.getUTCMonth() + 1;
  if (mes <= 9) mes = '0' + mes;

  //
  let dia = fecha.getUTCDate();
  if (dia <= 9) dia = '0' + dia;

  frm.total.value = fecha.getUTCFullYear() + '-' + mes + '-' + dia;
}
<form id="form">
  <table>
    <tr>
      <td>Fecha de Salida:</td>
      <td><input name="fecha_sali" id="fecha_sali" type="date"></td>
    </tr>
    <tr>
      <td>Días:</td>
      <td><input name="fechsa" id="fechsa" type="text" value="60"></td>
    </tr>
    <tr>
      <td>Fecha de pago:</td>
      <td>
        <input name="pago" id="total" type="date" readonly value="">
        <input class="md-trigger boton" type="button" value="Calcular" onclick="aumenta(this.form)" /></td>
    </tr>
  </table>
</form>

3
  • Hola marcos, tu solución esta muy buena solo que cuando quiero seleccionar una fecha de salida del mes anterior ya no calcula nada. como podría arreglar eso? muchas gracias.
    – estrada
    el 26 ago. 2019 a las 18:04
  • seria lo siguiente Marcos, ya el ejemplo que compartiste funciona super bien, solo que le coloco al input de fecha de pago como type='date' y ya cuando intento seleccionar una fecha de salida de un mes atrás no calcula el resultado final. intenta colocando el input de fecha de pago como type='date' y pruebalo nuevamente para que puedas observar bien. prueba colocando una fecha de salida de junio o julio de este año.
    – estrada
    el 26 ago. 2019 a las 19:10
  • 1
    listo no me fije bien ya ahora si sirvió sin problemas, muchísimas gracias por tu valiosa ayuda y tu tiempo. excelente respuesta.
    – estrada
    el 26 ago. 2019 a las 19:26
0

Cuando obtienes el valor de un input date con JS, viene con este formato de separación, yyyy-mm-dd, y tú estás utilizando .split(/), inténtalo de esta forma .split(-), cualquier duda hazla saber.

function aumenta(frm) { 
  num=frm.fechsa.value; 
  f=frm.fecha_sali.value; 
  // pasaremos la fecha a formato mm/dd/yyyy 
  f=f.split('-'); 
  f=f[1]+'/'+f[0]+'/'+f[2]; 
  // 
  hoy=new Date(f); 
  hoy.setTime(hoy.getTime()+num*24*60*60*1000); 
  mes=hoy.getMonth()+1; 
  if(mes<9) mes='0'+mes; 
  fecha=hoy.getDate()+'/'+mes+'/'+hoy.getFullYear(); 
  frm.total.value=fecha;   
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
    <td>Fecha de Salida:</td>
    <td><input name="fecha_sali" id="fecha_sali" type="date"></td>
</tr>
<tr>
    <td>Días:</td>
    <td><input name="fechsa" id="fechsa" type="text" value="60"></td>
</tr> 
<tr>
    <td>Fecha de pago:</td>
    <td><input name="pago" id="total" type="text">

<input class="md-trigger boton" type="button" value="Calcular" onclick="aumenta(this.form)" /></td>
</tr>
</table>

1
  • Hola Vick, ya realice el cambio del .split por esta forma .split(-) pero cuando presiono al boton calcular para que me de el resultado arroja lo siguiente: NaN/NaN/NaN
    – estrada
    el 26 ago. 2019 a las 17:41

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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