feat: ajoute des utilitaires de formatage de dates et les utilise dans les composants et pages événement

This commit is contained in:
Jalil Arfaoui 2025-10-22 00:11:15 +02:00
parent eca0b48ca2
commit 411556293c
4 changed files with 53 additions and 16 deletions

View file

@ -1,4 +1,5 @@
--- ---
import { formatDateSansHeure } from "../utils/date";
const { evenement, showOverlay = true } = Astro.props; const { evenement, showOverlay = true } = Astro.props;
--- ---
@ -11,7 +12,7 @@ const { evenement, showOverlay = true } = Astro.props;
{showOverlay && ( {showOverlay && (
<div class="affiche-overlay"> <div class="affiche-overlay">
<span class="affiche-nom">{evenement.nom}</span> <span class="affiche-nom">{evenement.nom}</span>
<span class="affiche-date">{new Date(evenement.date).toLocaleDateString("fr-FR", { timeZone: 'Europe/Paris' })}</span> <span class="affiche-date">{formatDateSansHeure(evenement.date)}</span>
</div> </div>
)} )}
</a> </a>

View file

@ -1,5 +1,6 @@
--- ---
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"; import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
import { formatDateAvecHeure } from "../utils/date";
const { evenement } = Astro.props; const { evenement } = Astro.props;
--- ---
@ -14,14 +15,7 @@ const { evenement } = Astro.props;
</a> </a>
</div> </div>
<div class="date"> <div class="date">
le {new Date(evenement.date).toLocaleString("fr-FR", { le {formatDateAvecHeure(evenement.date)}
timeZone: 'Europe/Paris',
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})}
</div> </div>
<div class="lieu"> <div class="lieu">
à {evenement.lieu} à {evenement.lieu}

View file

@ -4,6 +4,7 @@ import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
import {fetchEvenement, fetchAllEvenements} from "../../lib/contentful"; import {fetchEvenement, fetchAllEvenements} from "../../lib/contentful";
import Layout from "../../layouts/Layout.astro"; import Layout from "../../layouts/Layout.astro";
import Card from "../../components/Card.astro"; import Card from "../../components/Card.astro";
import { formatDateAvecHeure } from "../../utils/date";
export const prerender = false export const prerender = false
@ -38,13 +39,7 @@ const Wrapper = lieuUrl ? 'a' : 'div'
<header class="event-header"> <header class="event-header">
<h1>{nom}</h1> <h1>{nom}</h1>
<div class="event-meta"> <div class="event-meta">
<span class="event-date">{date ? new Date(date as string).toLocaleString("fr-FR", { <span class="event-date">{date ? formatDateAvecHeure(date as string) : ""}</span>
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
}) : ""}</span>
{lieu && ( {lieu && (
<span class="event-location"> <span class="event-location">
à <Wrapper target="_blank" href={lieuUrl}>{lieu}</Wrapper> à <Wrapper target="_blank" href={lieuUrl}>{lieu}</Wrapper>

47
src/utils/date.ts Normal file
View file

@ -0,0 +1,47 @@
/**
* Utilitaires de formatage des dates pour l'application Les Particules
*
* Toutes les dates sont formatées en fuseau horaire Europe/Paris
* pour garantir la cohérence à travers toute l'application.
*/
const TIMEZONE = 'Europe/Paris';
const LOCALE = 'fr-FR';
/**
* Formate une date complète avec heure (jour mois année, heure:minute)
* Exemple: "15 novembre 2024, 18:00"
*/
export function formatDateAvecHeure(date: string | Date): string {
return new Date(date).toLocaleString(LOCALE, {
timeZone: TIMEZONE,
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
/**
* Formate une date sans l'heure (jour mois année)
* Exemple: "15 novembre 2024"
*/
export function formatDateSansHeure(date: string | Date): string {
return new Date(date).toLocaleDateString(LOCALE, {
timeZone: TIMEZONE,
day: 'numeric',
month: 'long',
year: 'numeric'
});
}
/**
* Formate une date courte (jour mois année)
* Exemple: "15/11/2024"
*/
export function formatDateCourte(date: string | Date): string {
return new Date(date).toLocaleDateString(LOCALE, {
timeZone: TIMEZONE
});
}