Visualizzare le date in SPFx React in formato italiano

In SPFx 1.19 con React 17 è possibile realizzare un semplice functional components per visualizzare le date in formato italiano nella time zone italiana (Europe/Rome)

TypeScript: ShowDate

import * as React from 'react';
import { formatDate } from '../Helpers/DateHelper';

const ShowDate: React.FC<{date?: Date | string; locale?: string, dateOnly?: boolean}> = (props) => {
    const { date, locale } = props;

    const str = formatDate(date, locale, dateOnly);

    return <span title={str}>{str}</span>;
};

export default ShowDate;
per funzionare richiede la funzione formatDate

TypeScript: DateHelper.ts

export const formatDate = (date?: Date | string, locale?: string, dateOnly?: boolean): string => {
    const loc = locale === undefined ? "it-IT" : locale;

    const options: Intl.DateTimeFormatOptions = {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: dateOnly ? undefined : "2-digit",
        minute: dateOnly ? undefined : "2-digit",
        second: dateOnly ? undefined : "2-digit",
        timeZone: "Europe/Rome"
    };

    if (typeof date === "string") {
        const dt = new Date(date);
        return new Intl.DateTimeFormat(loc, options).format(dt);
    } else if (date !== undefined) {
        return new Intl.DateTimeFormat(loc, options).format(date);
    }
    return "";
};
è possibile usare il componente ShowDate con una stringa che rappresenta una data

TypeScript: Data come stringa

const dateStr = "2025-03-11T16:35:09Z";
<ShowDate date={dateStr} />
// 11/03/2025, 17:35:09
oppure un oggetto Date

TypeScript: Data come oggetto

const date = new Date();
<ShowDate date={date} />
come default visualizza le date italiane (it-IT) ma è possibile passare il parametro locale per cambiare il formato, ad esempio en-US

TypeScript: Data con una locale specifica

const dateStr = "2025-03-11T16:35:09Z";
<ShowDate date={dateStr} locale="en-US"/>
// 03/11/2025, 05:35:09 PM
oppure escludere la parte dell'ora

TypeScript: Data senza ora

const dateStr = "2025-03-11T16:35:09Z";
<ShowDate date={dateStr} locale="en-US" dateOnly={true}/>
// 03/11/2025, 05:35:09 PM
Per formattare le date usa la funzione JavaScript Intl.DateTimeFormat.
Tags:
React18 TypeScript16 Java7 SPFx19 SharePoint Online78
Potrebbe interessarti anche: