Cómo formatear fechas para diferentes configuraciones regionales en TanStack Start v1

Problema

Las fechas no tienen un formato de visualización universal. La secuencia 10/12/2025 significa 12 de octubre en Estados Unidos, pero 10 de diciembre en Reino Unido. Escribir "Oct 12, 2025" asume nombres de meses en inglés y una convención de orden específica. Cada región tiene sus propias expectativas para el formato de fecha, incluyendo el orden de día, mes y año, la elección de separadores y si los nombres de los meses se escriben completos o abreviados. Cuando una aplicación muestra fechas en un único formato fijo, resulta extraña y confusa para los usuarios de la mayoría de las regiones.

Los usuarios esperan que las fechas aparezcan en el formato que aprendieron y usan a diario. Una fecha que parece natural para una audiencia puede ser ambigua o discordante para otra. Sin formato adaptado a la configuración regional, las fechas se convierten en una fuente de fricción que socava la experiencia del usuario y hace que la aplicación parezca menos profesional.

Solución

Formatea las fechas según la configuración regional del usuario convirtiendo los valores de fecha en cadenas que siguen las convenciones regionales de orden, separadores y nombres de meses. React-intl proporciona funciones de formato y componentes que utilizan las API de internacionalización integradas del navegador para aplicar automáticamente las reglas correctas para cada configuración regional. Al pasar un valor de fecha y opciones de formato opcionales a estas herramientas, la aplicación produce una salida que es clara y natural para el idioma y la región del usuario.

Este enfoque garantiza que las fechas se muestren correctamente sin implementar manualmente la lógica de formato para cada configuración regional. El formato se adapta a la configuración regional del usuario, haciendo que las fechas sean inmediatamente reconocibles y reduciendo la carga cognitiva.

Pasos

1. Crear un componente que formatee fechas con el hook useIntl

Utiliza el hook useIntl para acceder al método formatDate, que convierte un valor de fecha en una cadena adaptada a la configuración regional.

import { useIntl } from "react-intl";

export function EventDate({ date }: { date: Date }) {
  const intl = useIntl();

  return (
    <time dateTime={date.toISOString()}>
      {intl.formatDate(date, {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}
    </time>
  );
}

El método formatDate aplica las convenciones de la configuración regional para mostrar fechas. El objeto de opciones controla qué partes de la fecha aparecen y su nivel de detalle. La cadena formateada se adapta a la configuración regional proporcionada por el IntlProvider en un nivel superior del árbol de componentes.

2. Formatear fechas con estilos específicos usando opciones predefinidas

Pasa diferentes combinaciones de opciones para controlar el estilo del formato de fecha, como fechas numéricas cortas o fechas descriptivas largas.

import { useIntl } from "react-intl";

export function ArticleMetadata({ publishedAt }: { publishedAt: Date }) {
  const intl = useIntl();

  const shortDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });

  const longDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });

  return (
    <div>
      <p>Published: {shortDate}</p>
      <p>Full date: {longDate}</p>
    </div>
  );
}

La opción month acepta valores como numeric, 2-digit, short, long y narrow. La opción weekday añade el día de la semana. Cada configuración regional interpreta estas opciones según sus propias convenciones, asegurando que el resultado coincida con las expectativas del usuario.

3. Usar el componente FormattedDate para formateo declarativo

Renderiza fechas de forma declarativa usando el componente FormattedDate, que acepta las mismas opciones de formateo que el método formatDate.

import { FormattedDate } from "react-intl";

export function OrderSummary({ orderDate }: { orderDate: Date }) {
  return (
    <div>
      <h2>Order placed on</h2>
      <FormattedDate
        value={orderDate}
        year="numeric"
        month="long"
        day="numeric"
      />
    </div>
  );
}

El componente FormattedDate renderiza la fecha formateada como un fragmento de React por defecto. Utiliza la configuración regional del contexto IntlProvider y aplica las mismas reglas de formateo que la API imperativa. Este enfoque funciona bien cuando la fecha formateada es el único contenido necesario en esa parte del árbol de componentes.

4. Formatear fechas con información de hora

Incluye componentes de hora añadiendo opciones de hora y minuto para mostrar tanto la fecha como la hora en una sola cadena formateada.

import { useIntl } from "react-intl";

export function AppointmentCard({ scheduledAt }: { scheduledAt: Date }) {
  const intl = useIntl();

  return (
    <div>
      <p>
        Scheduled for:{" "}
        {intl.formatDate(scheduledAt, {
          year: "numeric",
          month: "short",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
        })}
      </p>
    </div>
  );
}

Añadir las opciones hour y minute produce una cadena combinada de fecha y hora. La configuración regional determina si se usa el formato de 12 o 24 horas y cómo separar las porciones de fecha y hora. Esto mantiene el formateo consistente con las expectativas regionales para mostrar marcas de tiempo.