1

document.addEventListener('DOMContentLoaded', (event) => {
    const inputFecha = document.querySelector("#fechaNac");
    const inputEdad = document.getElementById("edad");

    inputFecha.addEventListener('change', Edad);

    Edad();

    function Edad() {
        var fechaNacimiento = inputFecha.value;
        const fechaActual = new Date();
        const anoActual = parseInt(fechaActual.getFullYear());
        const mesActual = parseInt(fechaActual.getMonth()) + 1;
        const diaActual = parseInt(fechaActual.getDay());
        //01-01-2010  2010-01-01
        const anoNacimiento = parseInt(String(fechaNacimiento).substring(0, 4));
        const mesNacimiento = parseInt(String(fechaNacimiento).substring(5, 7));
        const diaNacimiento = parseInt(String(fechaNacimiento).substring(8, 10));

        let edad = anoActual - anoNacimiento;
        console.log(anoNacimiento);
        if (mesActual < mesNacimiento) {
            edad--;
        } else if (mesActual == mesNacimiento) {
            if (diaActual < diaNacimiento) {
                edad--;
            }
        }
        inputEdad.value = edad;
    }
});
<table class="table">
    <thead class="thead-dark">
        <tr>
            <th hidden>
                @Html.DisplayNameFor(model => model.idEntidad)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.nombre)
            </th>           
            <th>
                @Html.DisplayNameFor(model => model.fechaConsulta)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tbDatos">
        @foreach (var item in Model)
        {
            <tr>
                <th hidden>
                    @Html.DisplayFor(model => item.idEntidad)
                </th>
                <th>
                    @Html.DisplayFor(model => item.nombre)
                </th>               
                <th>
                    @Html.DisplayFor(model => item.fechaConsulta)
                </th>
                <th>
                    <a class="fa-solid fa-user-doctor fa-2x" aria-hidden="true" asp-controller="Consulta" asp-action="Atencion" asp-route-id="@item.idEntidad"></a>
                </th>
            </tr>
        }
    </tbody>
</table>


<form>
    <div class="form-group row">
        <input asp-for="idEntidad" class="form-control" type="hidden" id="idEntidad"/>
        <input asp-for="fechaNac" class="form-control" id="fechaNac" min="01-01-1930" type="hidden" />
        <div class="col-10">
            <label asp-for="nombre" class="control-label"></label>
            <input asp-for="nombre" class="form-control" id="nombre" readonly />
        </div>
        <div class="col">
            <label asp-for="edad" class="control-label"></label>
            <input asp-for="edad" class="form-control" id="edad" disabled />
        </div>
    </div>
</form>

tengo una lista, en donde se cargan una lista de nombres desde una base de datos, esta lista tiene un botón que referencia al usuario por id, la cual me lleva a un formulario cargando los datos del usuario, como nombre, fecha nacimiento y la edad se debe llenar automáticamente con la fecha de nacimiento. En el formulario el input donde se carga fecha de nacimiento y el id del usuario son de tipo hidden y por ese motivo la edad no se calcula. Lo probé quitando el hidden del input de fecha de nacimiento y calcula la edad sin problemas. Espero ahora me puedan entender

1
  • Te refieres a que si por ejemplo le pones un valor directo en el value al input así <input asp-for="fechaNac" class="form-control" id="fechaNac" min="01-01-1930" oninput="Edad(this.value)" value="01-01-2000" /> no cambia la edad?
    – Sr1871
    Commented el 11 oct. 2022 a las 17:15

1 respuesta 1

0

La función es llamada desde un oninput, significa que no se llamará mientras no escribas en el input. Si cuando el DOM se carga el input de la fecha de nacimiento viene ya con valores, puedes tomar ese valor y calcular la edad escuchando a DOMContentLoaded y también asignar un evento de escucha del tipo onchange, en caso de que el input sea editable.

Por cierto, evita las llamada in-line. Son una mala práctica. Como verás en el ejemplo, no necesitas de ellas.

document.addEventListener('DOMContentLoaded', (event) => {
  const inputFecha = document.getElementById("fechaNac");
  const inputEdad = document.getElementById("edad");

  Edad();

  function Edad() {
    var fechaNacimiento = inputFecha.value;
    const fechaActual = new Date();
    const anoActual = parseInt(fechaActual.getFullYear());
    const mesActual = parseInt(fechaActual.getMonth()) + 1;
    const diaActual = parseInt(fechaActual.getDay());
    //01-01-2010  2010-01-01
    const anoNacimiento = parseInt(String(fechaNacimiento).substring(0, 4));
    const mesNacimiento = parseInt(String(fechaNacimiento).substring(5, 7));
    const diaNacimiento = parseInt(String(fechaNacimiento).substring(8, 10));

    let edad = anoActual - anoNacimiento;
    console.log(anoNacimiento);
    if (mesActual < mesNacimiento) {
      edad--;
    } else if (mesActual == mesNacimiento) {
      if (diaActual < diaNacimiento) {
        edad--;
      }
    }
    inputEdad.value = edad;
  }

});
<input asp-for="fechaNac" class="form-control" id="fechaNac" min="01-01-1930" value="1980-01-01" />
<input asp-for="edad" class="form-control" id="edad" readonly />

Veamos un ejemplo escuchando además el evento change del input:

document.addEventListener('DOMContentLoaded', (event) => {
  const inputFecha = document.querySelector('#fechaNac');
  const inputEdad = document.getElementById("edad");

  inputFecha.addEventListener('change', Edad);

  Edad();

  function Edad() {
    var fechaNacimiento = inputFecha.value;
    const fechaActual = new Date();
    const anoActual = parseInt(fechaActual.getFullYear());
    const mesActual = parseInt(fechaActual.getMonth()) + 1;
    const diaActual = parseInt(fechaActual.getDay());
    //01-01-2010  2010-01-01
    const anoNacimiento = parseInt(String(fechaNacimiento).substring(0, 4));
    const mesNacimiento = parseInt(String(fechaNacimiento).substring(5, 7));
    const diaNacimiento = parseInt(String(fechaNacimiento).substring(8, 10));

    let edad = anoActual - anoNacimiento;
    console.log(anoNacimiento);
    if (mesActual < mesNacimiento) {
      edad--;
    } else if (mesActual == mesNacimiento) {
      if (diaActual < diaNacimiento) {
        edad--;
      }
    }
    inputEdad.value = edad;
  }
});
<input asp-for="fechaNac" class="form-control" id="fechaNac" min="01-01-1930" value="1980-01-01" />
<input asp-for="edad" class="form-control" id="edad" readonly />

Edit

Con un input de tipo hidden también funciona:

document.addEventListener('DOMContentLoaded', (event) => {
  const inputFecha = document.querySelector('#fechaNac');
  const inputEdad = document.getElementById("edad");

  // inputFecha.addEventListener('change', Edad);

  Edad();

  function Edad() {
    var fechaNacimiento = inputFecha.value;
    const fechaActual = new Date();
    const anoActual = parseInt(fechaActual.getFullYear());
    const mesActual = parseInt(fechaActual.getMonth()) + 1;
    const diaActual = parseInt(fechaActual.getDay());
    //01-01-2010  2010-01-01
    const anoNacimiento = parseInt(String(fechaNacimiento).substring(0, 4));
    const mesNacimiento = parseInt(String(fechaNacimiento).substring(5, 7));
    const diaNacimiento = parseInt(String(fechaNacimiento).substring(8, 10));

    let edad = anoActual - anoNacimiento;
    console.log(anoNacimiento);
    if (mesActual < mesNacimiento) {
      edad--;
    } else if (mesActual == mesNacimiento) {
      if (diaActual < diaNacimiento) {
        edad--;
      }
    }
    inputEdad.value = edad;
  }
});
<input asp-for="fechaNac" class="form-control" id="fechaNac" min="01-01-1930" value="1980-01-01" type="hidden" />
<input asp-for="edad" class="form-control" id="edad" readonly />

7
  • muchas gracias, era justo lo q necesitaba y tomare en cuenta lo de las llamadas in-line. Gracias
    – jano
    Commented el 12 oct. 2022 a las 22:31
  • Una consulta, el codigo funciona corectamente me muestra la edad y todo bien, pero si pongo el input de fechaNac como type="hidden", ya no calcula la edad, xq???
    – jano
    Commented el 15 oct. 2022 a las 15:58
  • 1
    @jano sí funciona, revisa el último fragmento de código.
    – A. Cedano
    Commented el 15 oct. 2022 a las 21:04
  • @jano sin ver el escenario real es difícil reproducir el problema. ¿Podrías agregar en la pregunta un código con ese escenario que dices o, si es un problema nuevo, abrir una nueva pregunta con el nuevo problema? Sería cuestión de lanzar el código desde ese evento en el cual se llenan los datos, no hay más misterio. Puede que no estés refiriendo bien al elemento en ese nuevo contexto, o que no esté cargado cuando intentas acceder a él.
    – A. Cedano
    Commented el 17 oct. 2022 a las 14:34
  • @jano no me queda claro cuál es el elemento que dispara el código para que se calcule la edad. Hablas de un botón o algo así, pero ¿cuál es ese botón en tu código o cual es ese elemento y qué acción ocurre en él para que se dispare el código del cálculo de la edad? Eso no lo veo claro, ni en el código ni en el planteamiento de la pregunta y eso es lo fundamental para saber por qué no funciona o incluso para simplificar el código.
    – A. Cedano
    Commented el 17 oct. 2022 a las 15:37

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.