feat: ajoute des utilitaires de formatage de dates et les utilise dans les composants et pages événement
This commit is contained in:
parent
eca0b48ca2
commit
411556293c
4 changed files with 53 additions and 16 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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
47
src/utils/date.ts
Normal 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
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue