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 ve 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 se siente poco natural o ilegible para usuarios en diferentes regiones.

Solución

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

Pasos

1. Crear un componente de cliente para una fecha

Dado que los componentes de react-intl requieren un IntlProvider, deben usarse dentro de componentes de 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 formateo

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() {
  // This could come from a database or 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".