DateSeparator
Separador «Hoy», «Ayer» o la fecha entre mensajes.
Usar
import { DateSeparator } from "@unozero-ai/ui/react";
<DateSeparator></DateSeparator>Hoy, ayer y fecha absoluta
date acepta un Date, un timestamp o una cadena ISO. Si cae en el día de hoy dice «Hoy», si cae en el de ayer, «Ayer», y si no, la fecha completa. Compara días del calendario de quien mira, no bloques de 24 horas: un mensaje de las 23:50 de anoche es «Ayer». Una fecha sola como "2026-09-23" es ese día en la zona de quien mira, no la medianoche UTC, que en Bogotá todavía es el 22. Lo que no es una fecha se lee «Fecha inválida».
El componente se pinta solo en el navegador, así que ya no hay desajuste de hidratación ni hace falta useHydrated. Lo que sí debe ir en el navegador es el cálculo de «ahora»: hazlo en el inicializador de useState de un componente de cliente. Calculado en el servidor, un servidor en UTC y un huésped en Bogotá no están en el mismo día cinco horas de cada noche, y una página estática se queda con el día en que se compiló.
En un hilo
Va entre el último mensaje de un día y el primero del siguiente, nunca encima de cada mensaje: la hora de cada burbuja ya la da su timestamp.
En otro idioma
Ya no hay UIProvider: el idioma del formato sale de setLocale y los textos «Hoy» y «Ayer» de setLabels, las dos del paquete raíz. Son globales: se llaman una vez al arrancar la app y repintan todos los componentes ya montados. Pulsa el botón y mira cómo cambian también los separadores de los otros ejemplos de esta página. Más en Textos e idioma.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).