es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Ocultar fechas inválidas en Luxon.

15 Jul, 2023 Programación

Estoy tratando de formatear un diseño HTML para que no muestre mis elementos de fecha si son inválidos. Tengo una fecha de “Creado” y una fecha de “Actualizado”, por lo que al menos un campo estará vacío con frecuencia.

Estoy tratando de usar la función isValid() de luxon dentro de un script en mi diseño para incluir selectivamente la fecha o sobrescribirla. El problema es que ahora no se incluyen todas las fechas, sean válidas o no. Más allá de lo básico, soy un novato total en frontend, así que seguro que es algo sencillo.

Esto es lo que tengo actualmente dentro de la cabecera del diseño:

<h1>{{ title }}</h1>

<script type="text/javascript">
    if (created.isValid() === true) {
        document.write('<p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p>');
    } else {
        document.write('');
    }
</script>

<script type="text/javascript">
    if (updated.isValid() === true) {
        document.write('<p>Updated: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time></p>');
    } else {
        document.write('');
    }
</script>

También he intentado abordarlo de esta manera:

<script>
created.isValid() ? document.write('<p>Created: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time></p>') : '';
</script>

<script>
updated.isValid() ? document.write('<p>Updated: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time></p>') : '';
</script>

Estoy bastante seguro de que esto se debe a que aún no comprendo completamente la semántica de JavaScript y los documentos HTML, pero todavía estoy en la etapa en la que no sé lo que no sé.

¡Cualquier ayuda sería muy apreciada!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con ambos fragmentos de código es que document.write() no es un enfoque óptimo para agregar o eliminar elementos HTML basados en una condición.

    En su lugar, puedes crear un nuevo elemento div que se utilizará para agregar tus elementos de fecha si son válidos, y agregar este elemento a tu diseño usando document.body.appendChild().

    Aquí tienes un ejemplo de cómo podría verse tu código:

    <h1>{{ título }}</h1>

<script>
  const contenedorFecha = document.createElement("div");

  if (created.isValid()) {
    const fechaCreado = document.createElement("p");
    fechaCreado.innerHTML = `Creado: <time datetime="{{ created | htmlDateString }}">{{ created | readableDate }}</time>`;
    contenedorFecha.appendChild(fechaCreado);
  }

  if (updated.isValid()) {
    const fechaActualizado = document.createElement("p");
    fechaActualizado.innerHTML = `Actualizado: <time datetime="{{ updated | htmlDateString }}">{{ updated | readableDate }}</time>`;
    contenedorFecha.appendChild(fechaActualizado);
  }

  document.body.appendChild(contenedorFecha);
</script>

    Este código crea un nuevo elemento div llamado contenedorFecha, luego verifica si created y updated son válidos usando isValid(). Si lo son, crea un elemento p para cada fecha y lo agrega a contenedorFecha. Finalmente, agrega contenedorFecha al elemento body de tu diseño usando document.body.appendChild().

    Ahora, si ambas fechas no son válidas, no se agregará nada al diseño. Si solo una fecha es válida, solo esa fecha se agregará. Si ambas son válidas, se agregarán ambas fechas.

Comments are closed.