ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Visualización de datos

Moment

rx.momentrx.MomentDelta

Documentación oficial

Pedido del taller

Debajo de cada reseña de la lista, muestra cuándo se escribió en tiempo relativo, como «hace 3 minutos» o «hace 2 horas». Y que al pasar el ratón se vea también la hora exacta.

rx.moment es un componente para mostrar fechas que envuelve react-moment. Convierte fechas al formato que quieras y resuelve en el navegador el tiempo relativo, como "hace 5 minutos", y la conversión de zonas horarias.

Los ejemplos de esta página usan date_now del State de abajo. Es la hora (UTC) a la que arrancó el servidor; al pulsar "Update" pasa a la hora actual y se refleja a la vez en todos los ejemplos de abajo. La documentación de Reflex guarda un datetime tal cual en el State, pero aquí lo guardamos como cadena ISO. rx.moment acepta las dos cosas.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now),
    rx.button("Update", on_click=MomentDateState.update_moment_date, size="1", variant="soft"),
)

Prueba las propiedades

Los tokens de format siguen las reglas de moment.js (YYYY año, MM mes, DD día, HH hora, mm minuto, ss segundo, ddd día de la semana). Si activas from_now, en lugar del formato se ve el tiempo relativo.

Prueba las propiedades

format

from_now

from_now_short

with_title

rx.moment("2026-01-01T09:00:00Z", format="YYYY-MM-DD HH:mm", tz="Asia/Seoul", from_now=False, from_now_short=False, with_title=False)

Si cambias tz, el mismo instante se ve en la hora de esa región. Activa with_title y pasa el ratón: la fecha completa aparece como tooltip.

Propiedad	Valores	Uso
Primer argumento / `date`	Cadena, `datetime`, `date` …	Fecha que se muestra; sin ella, la hora actual
`format`	Formato como `"YYYY-MM-DD"`	Formato de presentación
`from_now` / `to_now`	`True` / `False`	Tiempo relativo, como "hace 5 minutos" / "dentro de 5 minutos"
`from_now_short`	`True` / `False`	Versión corta, como "1h" o "2d"
`from_now_during`	Milisegundos	Tiempo relativo solo durante ese tiempo; después, `format`
`add` / `subtract`	`rx.MomentDelta(...)`	Suma o resta a la fecha solo al mostrarla
`tz`	Zona horaria como `"Asia/Seoul"`	Muestra la fecha en esa zona horaria
`locale`	`"fr"` `"ko"` …	Idioma de este componente; por defecto `"en"`
`interval`	Milisegundos (0 lo detiene)	Volver a dibujar periódicamente
`with_title` / `title_format`		Fecha completa que aparece al pasar el ratón, y su formato
`diff` · `unit` · `decimal`		Diferencia entre dos fechas
`duration` · `duration_from_now` · `trim`		Mostrar el tiempo transcurrido
`unix` · `parse` · `local`		Cómo interpretar la fecha de entrada; salida en hora local
`on_change`	Evento	Al aparecer por primera vez y cada vez que la fecha se vuelve a dibujar

Tiempo relativo

Muchas veces se entiende mejor «hace cuánto» que la fecha tal cual. from_now muestra el tiempo desde ahora hasta esa fecha ("2 hours ago") y to_now, en la dirección contraria ("in 2 hours"). from_now_short lo abrevia, como "2h". Con from_now_during=100000 se ve en tiempo relativo solo durante 100 segundos; después, según format.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, from_now=True),
    rx.moment(MomentDateState.date_now, to_now=True),
    rx.moment("2026-01-01T09:00:00Z", from_now=True, from_now_short=True),
    rx.moment(MomentDateState.date_now, from_now_during=100000, format="YYYY-MM-DD HH:mm"),
)

Formato

Con format le das la forma que quieras.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, format="YYYY-MM-DD"),
    rx.moment(MomentDateState.date_now, format="HH:mm:ss"),
    rx.moment(MomentDateState.date_now, format="ddd, MMM D YYYY, h:mm A"),
)

Sumar y restar fechas

Si pasas un rx.MomentDelta a add o subtract, la fecha del State no cambia: solo se desplaza al mostrarla en pantalla. Las claves son years, quarters, months, weeks, days, hours, minutes y seconds, y Reflex 0.10 tiene además milliseconds. La columna izquierda suma 2 a cada unidad; la derecha, resta 2.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.grid(
    *[
        rx.moment(MomentDateState.date_now, add=rx.MomentDelta(**{unit: 2}), format="YYYY-MM-DD - HH:mm:ss")
        for unit in ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"]
    ],
    *[
        rx.moment(MomentDateState.date_now, subtract=rx.MomentDelta(**{unit: 2}), format="YYYY-MM-DD - HH:mm:ss")
        for unit in ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"]
    ],
    rows="8",
    flow="column",
    column_gap="6",
    row_gap="1",
    width="max-content",
)

Idioma

rx.moment está en inglés por defecto, y solo cambia de idioma el componente al que le das locale. No afecta a otros componentes ni a la página. Si das un nombre de idioma fijo, solo se carga el archivo de ese idioma; si das un valor del State, se cargan los archivos de todos los idiomas.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, format="dddd D MMMM YYYY"),
    rx.moment(MomentDateState.date_now, format="dddd D MMMM YYYY", locale="fr"),
    rx.moment(MomentDateState.date_now, format="LL dddd", locale="ko"),
    rx.moment(MomentDateState.date_now, from_now=True, locale="ko"),
)

Zona horaria

Con tz, el mismo instante se muestra en la hora de esa región. En el formato, z es la abreviatura de la zona horaria.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, tz="America/Los_Angeles", format="YYYY-MM-DD HH:mm z"),
    rx.moment(MomentDateState.date_now, tz="Europe/Paris", format="YYYY-MM-DD HH:mm z"),
    rx.moment(MomentDateState.date_now, tz="Asia/Seoul", format="YYYY-MM-DD HH:mm z"),
)

Redibujar periódicamente en el navegador

Si no das fecha, se usa la hora actual del navegador. Con interval (en milisegundos) se vuelve a dibujar a ese ritmo y tienes un reloj. Todo ocurre en el navegador, sin comunicarse con el servidor.

rx.moment(interval=1000, format="HH:mm:ss")

on_change

on_change se llama cuando el componente aparece por primera vez y cada vez que la fecha se vuelve a dibujar, y recibe la cadena de esa fecha. Aunque con interval=0 no se redibuje periódicamente, se llama una vez al aparecer. Si vuelve a aparecer por una recarga o un cambio de página, se llama de nuevo, y en modo de desarrollo puede llamarse dos veces al principio por el React Strict Mode. Si activas el interruptor, se llama cada 2 segundos.

on_change fired 0 times

class MomentTickState(rx.State):
    updating: bool = False
    ticks: int = 0
    last: str = ""

    @rx.event
    def on_moment_tick(self, date: str):
        self.ticks += 1
        self.last = date

    @rx.event
    def set_moment_updating(self, value: bool):
        self.updating = value


rx.vstack(
    rx.hstack(
        rx.moment(
            format="HH:mm:ss",
            interval=rx.cond(MomentTickState.updating, 2000, 0),
            on_change=MomentTickState.on_moment_tick,
        ),
        rx.switch(checked=MomentTickState.updating, on_change=MomentTickState.set_moment_updating),
        align="center",
    ),
    rx.text("on_change fired ", MomentTickState.ticks, " times", size="2"),
    rx.text(MomentTickState.last, size="1", color_scheme="gray"),
)

Otras propiedades

Son funciones que solo aparecen en la tabla de propiedades de la documentación oficial. De arriba abajo: diferencia entre fechas (días), diferencia entre fechas (meses, con decimales), tiempo transcurrido entre dos horas, tiempo transcurrido desde esa fecha hasta ahora, interpretación de una hora Unix (segundos), lectura con un formato dado (parse) y tiempo relativo que muestra la fecha completa al pasar el ratón.

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment("2026-10-24", diff="2026-01-01", unit="days"),
    rx.moment("2026-10-24", diff="2026-01-01", unit="months", decimal=True),
    rx.moment(date="2026-10-24T12:00:00Z", duration="2026-10-24T09:30:00Z"),
    rx.moment("2026-01-01T00:00:00Z", duration_from_now=True, interval=1000),
    rx.moment("1767225600", unix=True, format="YYYY-MM-DD"),
    rx.moment("24/10/2026", parse="DD/MM/YYYY", format="YYYY-MM-DD"),
    rx.moment(MomentDateState.date_now, from_now=True, with_title=True, title_format="YYYY-MM-DD HH:mm:ss"),
)

Completar el pedido

Debajo de la reseña ponemos el tiempo relativo en pequeño y, con with_title, la hora exacta se ve al pasar el ratón. Con interval=30000, cada 30 segundos "a few seconds ago" pasa solo a algo como "a minute ago".

Jin left a review

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.card(
    rx.hstack(
        rx.avatar(fallback="JK", size="3", radius="full"),
        rx.vstack(
            rx.text("Jin left a review", weight="bold", size="2"),
            rx.moment(
                MomentDateState.date_now,
                from_now=True,
                with_title=True,
                title_format="YYYY-MM-DD HH:mm",
                interval=30000,
                font_size="12px",
                color=rx.color("gray", 11),
            ),
            spacing="0",
        ),
        align="center",
    ),
    max_width="320px",
)

Notas del taller

rx.moment(fecha, format="YYYY-MM-DD") cambia el formato; from_now/to_now da tiempo relativo.
add/subtract=rx.MomentDelta(days=2) desplaza la fecha solo al mostrarla.
tz fija la zona horaria y locale el idioma solo de este componente (por defecto, inglés).
Sin fecha y con interval=1000 es un reloj del navegador. on_change se llama también al aparecer por primera vez.

← Anterior

Visualización de datos · Scroll Area

Mostrar y ocultar · Tabs

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex