Mejoras de Fechas en Proyectos con Astro y JavaScript

Clase 24 de 25 • Curso de Creación de Páginas Web con Astro

Ameth Ordoñez Erazo

student•

Para crear una función que puedan llamar en todos los archivos para formatear la fecha, pueden crear una carpeta llamada utils y un archivo donde estarán todas las funciones globales que puedan crear:src/utils/funciones.js

Allí pueden crear una función, o dos, si quieren crear una que incluya el año y una que no.

// src/utils/funciones.js

export const FormatDate = (date) => {
	const event = new Date(date)
	const newDate = event.toDateString()
	return newDate
}

export const FormatDateWithoutYear = (date) => {
	const event = new Date(date)
	const newDate = event.toDateString().slice(0, -4)
	return newDate
}

Para utilizarlo, solo importan la función que quieren utilizar en el archivo. Por ejemplo, en Card.astro:

import { FormatDateWithoutYear } from '../utils/funciones'

Y lo pueden utilizar directamente en el HTML pasandole por parámetro la variable que tiene la fecha:

<time datetime={FormatDateWithoutYear(time)} class="block text-xs text-gray-500">
	{FormatDateWithoutYear(time)}
</time>

Así mismo en cualquier archivo, importan la función que necesitan y le pasan la fecha por parámetro. No olviden dejar su like 💖

Julio Bastidas

student•

Podemos usar toLocaleDateString de la siguiente forma para no tener necesidad de hacer slide y colocarla en español

const event = new Date(time);
const date = event.toLocaleDateString('es-ES', {
    month: 'long',
    day: 'numeric',
});

Carlos Alberto Granada Vasquez

student•

Este fue el proyecto funcional y ya hemos realizado ventas. Muchas gracias a Platzi https://entintados.com.co/. Obviamente aún queda camino por mejorar, pero seguimos avanzando.

Mario Zamora

student•

Cree una función para poder llamar desde la ruta:

src/helpers/formatDate.ts

export const formatDate = (time: string) => {
    const parsedDate = new Date(time);
    const formattedDate = parsedDate.toLocaleDateString('es-ES', {
        month: 'long',
        day: 'numeric',
        year: 'numeric',
    });

    return formattedDate;
}

Para despues simplemente hacer la importación:

---
import { formatDate } from '../helpers/formatDate';

interface Props {
	title: string;
	time: string;
	tags: string[];
	slug: string;
}

const { title, time, tags, slug } = Astro.props;
const date = formatDate(time) // Aquí llamamos la función y enviamos como parametro la variable time.
---

Brandon Lee Aguero Fernandez

student•

Este es mi proyecto personal que realicé durante el curso. TypeMaster Espero este terminado cuando este ingresando a este proyecto. Saludos👋