Formateo de fechas y horas

Mostrar fechas localizadas en lugar de números ambiguos

Problema

Mostrar una fecha sin formato, como 10/12/2025, es ambiguo. Un usuario en EE.UU. lo interpreta como 12 de octubre, mientras que un usuario en el Reino Unido lo ve como 10 de diciembre. Simplemente codificar un único formato (por ejemplo, 'Oct 12, 2025') crea una experiencia que resulta poco natural o ilegible para usuarios en diferentes regiones.

Solución

Utiliza un componente de formateo específico de una biblioteca como react-intl. Un componente como FormattedDate lee automáticamente el idioma actual desde su proveedor. Formatea un objeto Date en una cadena correcta y legible según las reglas del idioma del usuario, gestionando el orden, los separadores y los nombres de los meses.

Pasos

1. Crear un componente cliente para una fecha

Dado que los componentes de react-intl requieren un IntlProvider, deben utilizarse dentro de componentes cliente.

Crea un nuevo componente, app/components/PostDetails.tsx, que mostrará una fecha formateada.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

Este componente acepta un objeto Date como prop. Luego utiliza FormattedDate para renderizarlo.

2. Pasar opciones de formato

El componente FormattedDate acepta opciones para controlar la salida. En el ejemplo anterior:

  • value es el objeto Date a formatear.
  • dateStyle="long" solicita un formato como "10 de diciembre de 2025". Otras opciones incluyen "full", "medium" y "short".
  • timeStyle="short" solicita un formato como "15:00".

3. Usar el componente en una página

Ahora, puedes usar tu nuevo componente en cualquier página, como tu página de inicio.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // Esto podría provenir de una base de datos o API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

Un usuario que visite /en verá "Posted on: December 10, 2025 at 3:00 PM". Un usuario que visite /es verá "Posted on: 10 de diciembre de 2025, 15:00".