1

Hola a Todos como están espero me puedan ayudar con esto.. tengo 2 campos fechas (Fecha Inicial y fecha Final) y también un campo donde se le agrega un numero para representar los meses que durará esas fechas me gustaría que al poner en la primera fecha la fecha inicial y al poner por ejemplo 3 meses de duración el otro input date cambie según este numero (es decir ponga la fecha final) aquí represento en esta imagen lo que mas o menos quiero todo al ínstate

introducir la descripción de la imagen aquí

CODIGO

<table width="542" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="32"><span class="texy">Duración:</span></td>
    <td colspan="3"><input name="duracion" type="number" id="duracion" size="5" style="width:40px" class="validar" required onkeypress="nextFocus('duracion', 'fechainicial')">
      <input name="duracion2" type="text" id="duracion2" value="MESES" size="12" class="validar" required></td>
  </tr>
  <tr>
    <td height="32"><span class="texy">Fecha Ingreso:</span></td>
    <td colspan="3"><input style="width: 120px;" name="fechainicial" type="date" id="fechainicial" size="60" max="9999-12-31" class="validar" required onkeypress="nextFocus('fechainicial', 'fechafinal')"></td>
  </tr>
  <tr>
    <td height="32"><span class="texy">Fecha Final:</span></td>
    <td colspan="3"><input style="width: 120px;" name="fechafinal" max="9999-12-31" type="date" id="fechafinal" size="40" class="validar" required onkeypress="nextFocus('fechafinal', 'userfile')"></td>
  </tr>
</table>

3
  • 1
    y el código fuente? Commented el 11 jun. a las 17:10
  • olvide ponerlo ya lo pongo.. mil disculpas!!
    – Eduardo
    Commented el 11 jun. a las 18:01
  • @Eduardo , que has intentado, proporciona el código JavaScript.
    – PsychoMx
    Commented el 11 jun. a las 18:20

3 respuestas 3

1

Varios comentarios sobre tu código:

  • No necesitas usar moment.js a estas alturas y sus autores mismos recomiendan que ya no se use.
  • Si quieres que funcione al instante, debes recalcular la fecha final tanto si cambia el número de meses como si cambia la fecha inicial.

He preparado un ejemplo usando javscript vainilla (sin jquery u otras dependencias) y valiéndome de la clase Date.

const imeses = document.getElementById('meses');
const ifechainicial = document.getElementById('fechainicial');
const ifechafinal = document.getElementById('fechafinal');

function calcularFin() {
  let meses = parseInt(imeses.value);
  let fechaini = ifechainicial.valueAsDate;
  ifechafinal.valueAsDate = new Date(fechaini.setMonth(fechaini.getMonth()+meses));
}

ifechainicial.valueAsDate = new Date();
calcularFin();
<input type="number" name="meses" id="meses" onchange = "calcularFin()" value=1>
<input type="date" id="fechainicial" onchange="calcularFin()"/>
<input type="date" id="fechafinal"/>

El aumento de meses es bastante básico (el que hace la clase Date(). Sobre esta puedes realizar el ajuste de días que consideres necesario para cubrir tus requerimientos.

En una versión para producción de la función calcularFin(), tomaría precauciones como validar si hay un número en el campo meses o una fecha en el campo de fecha inicial. Si no lo hay, limpiar el campo de la fecha final. Acá no he agregado ninguna de esas validaciones para mantener el código simple y fácil de entender.

Si tienes dudas, no dudes en dejar un comentario.

4
  • mil gracias... de inmediato lo ajuste a loq ue me explicas, no tenia conocimiento de que moments no era usado ya... Otra Consulta como hago para que a la fecha final en otro campo date se le reste un mes.... para que sea otra fecha pero de preaviso?
    – Eduardo
    Commented el 12 jun. a las 0:39
  • 1
    Diría que si te has tomado el tiempo de leer hasta entender el código de mi ejemplo, sabrías cómo restar un mes a una fecha y sabrías cómo colocar ese valor en un input. Por otro lado, si aún así no sabes como hacerlo, los comentarios no son el lugar para plantear nuevas dudas. Decide si esta respuesta te fue útil, votala y acéptala en caso de haberlo sido y si hace falta, plantea una nueva pregunta para la nueva duda que tienes. Me atrevo a hacer este comentario, porque veo que, hasta la fecha, no has emitido ni un solo voto, a pesar de haber recibido buenas respuestas a tus preguntas.
    – jachguate
    Commented el 12 jun. a las 0:45
  • 1
    Si no recuerdas como funciona el sitio, puedes hacer de nuevo el recorrido de bienvenida, o leer ¿Qué debo hacer cuando alguien contesta mi pregunta?. Un saludo.
    – jachguate
    Commented el 12 jun. a las 0:46
  • Bueno tienes razon, pero no me juzguen aun.. pues lo he intentado hacer pero me resta son dos meses y no uno y no se como hacer para restar los dias.. mil disculpas no sabia lo de los votos
    – Eduardo
    Commented el 12 jun. a las 3:27
1

bueno creo que lo pude hacer pero me falta ajustarle el numero de dias..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="moment.js"></script>
  <input type="number" name="duracion" id="duracion" Onchange = "mostrar('num')">
  <input type="date" id="fechainicial"/>
  <input type="date" id="fechafinal"/>


<script>
function mostrar(num) {
 var x = $("#duracion").val();
 //alert(x);
//let date = moment().add(3, "M");
let date = moment().add(x, "M");//display the date
document.getElementById("fechafinal").value =
  date.format("yyyy-MM-DD");
  }
</script>

esta es la libreria js moments

https://momentjs.com/downloads/moment.js

1

**Mucho ojo con el manejo de fechas. ** Un mes es una unidad dinámica, algunas veces equivale a 28 días, otra a 29, a 30 y a 31. Esto ocasiona que existan múltiples maneras de sumar meses.

Por otro lado, javascript es especialmente horrible en el manejo de fechas. Lo primero a tener claro es que los meses comienzan en el índice cero, es decir (0: enero, 1:febrero, 2:marzo,etc)

Luego está el problema de la "hora local" vs "hora UTC", un ejemplo: Agregamos un input date cuyo valor es 2024-02-01 y retornemos el mes

console.log(fecha.valueAsDate.getMonth()); //0
console.log(fecha.valueAsDate.getUTCMonth()); //1
<input type="date" id="fecha" value="2024-02-01"/>

Si tú te encuentras en alguna zona con UTC menor a cero, te vas a llevar la sorpresa que el mes que retorna getMonth() es 0 y no 1 como era de esperar. Esto sucede porque la fecha internamente tiene el UTC asociado, para solventar esto hay que utilizar getUTCMonth()


Esto es importante, porque javascript suma los meses calculando los días del mes, por lo que si estamos calculando a partir de un mes incorrecto darán resultados extraños

Otro ejemplo:

Dada la siguiente fecha 2024-02-01 (primero de febrero) y le sumamos un mes, yo que aprobé el kindergarten esperaría como resultado el 2024-03-01 (primero de marzo). Que resuelve javascript? (usando ambas funciones):

let d1 = new Date("2024-02-01");
d1.setMonth(d1.getMonth() + 1);
console.log(d1); //"2024-03-03T00:00:00.000Z" (3 de marzo!!!)

let d2 = new Date("2024-02-01");
d2.setUTCMonth(d2.getUTCMonth() + 1);
console.log(d2); //"2024-03-01T00:00:00.000Z" (1 de marzo!!!)


Entonces para complementar la respuesta de @jachguate, pienso que el código debería ser:

const imeses = document.getElementById('meses');
const ifechainicial = document.getElementById('fechainicial');
const ifechafinal = document.getElementById('fechafinal');

function calcularFin() {
  let meses = imeses.valueAsNumber;
  let fechaini = ifechainicial.valueAsDate;
  ifechafinal.valueAsDate = new Date(fechaini.setUTCMonth(fechaini.getUTCMonth()+meses));
}

ifechainicial.valueAsDate = new Date();
calcularFin();
<input type="number" name="meses" id="meses" onchange = "calcularFin()" value=1>
<input type="date" id="fechainicial" onchange="calcularFin()"/>
<input type="date" id="fechafinal"/>

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.