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 . 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👋

Mejoras de Fechas en Proyectos con Astro y JavaScript

¿Qué es Astro?

Creación de Páginas Web con Astro y JavaScript

Introducción a Astro: Framework web para sitios rápidos y centrados en contenido

Primeros Pasos

Estructura de Proyectos en Astro: Primeros Pasos y Configuración

Creación de Páginas Web con Astro: Estructura y Estilos Básicos

Proyecto

Historia y evolución del desarrollo web: de ARPANET a Astro

Creación de un Sitio Web Colaborativo con Astro y Tailwind

Integración de Tailwind CSS en Proyectos Astro

Ventajas de TypeScript en Proyectos JavaScript con Tailwind

Creación y Configuración de Repositorio con Git y Prettier

Astro API

Creación de Componentes en Astro: Header y Hero

Creación de Páginas 404 y Markdown en Astro

Creación de Plantillas en Astro para Páginas Markdown

Iteración de Archivos Markdown en Proyecto Astro con JavaScript

Integración de MDX en Proyectos Astro: Variables en JSX

Rutas Estáticas y Dinámicas en Astro para Sitios Web

Rutas Dinámicas en Astro: Creación y Configuración Paso a Paso

Creación de Plantillas Dinámicas con Tailwind y Astro

Astro Islands

Integración de React en Astro para Componentes Web

Integración de Vue en Proyectos Astro con TailwindCSS

Integración de Svelte en Proyectos con React y Vue

Patrón de Diseño de Islas de Componentes en Astro

Deploy

Configuración SEO y RSS en Astro: Optimiza y Mejora Visibilidad Web

Despliegue de Sitios Web con Astro y Clover en Producción

Bonus

Mejoras de Fechas en Proyectos con Astro y JavaScript

Cierre

Creación de Aplicaciones Web con Astro Framework