ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Datenanzeige

Moment

rx.momentrx.MomentDelta

Offizielle Doku

Werkstattauftrag

Zeig unter jedem Eintrag der Bewertungsliste die Schreibzeit als relative Zeit an, etwa „vor 3 Minuten“ oder „vor 2 Stunden“. Beim Darüberfahren mit der Maus soll auch der genaue Zeitpunkt erscheinen.

rx.moment ist eine Komponente zur Datumsanzeige, die react-moment umhüllt. Sie bringt Datumsangaben in das gewünschte Format und erledigt relative Zeiten wie „vor 5 Minuten“ sowie Zeitzonenumrechnungen im Browser.

Die Beispiele auf dieser Seite verwenden date_now aus dem State unten. Es ist der Zeitpunkt (UTC), zu dem der Server gestartet wurde; ein Klick auf „Update“ setzt ihn auf die aktuelle Zeit, was sich in allen Beispielen darunter widerspiegelt. Die Reflex-Doku legt ein datetime direkt im State ab, hier steht dort ein ISO-String. rx.moment akzeptiert beides.

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"),
)

Props ausprobieren

Die Token in format folgen den Regeln von moment.js (YYYY Jahr, MM Monat, DD Tag, HH Stunde, mm Minute, ss Sekunde, ddd Wochentag). Mit from_now erscheint statt des Formats eine relative Zeit.

Props ausprobieren

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)

Änderst du tz, erscheint derselbe Moment in der Ortszeit dieser Region. Schalte with_title ein und fahr mit der Maus darüber, dann zeigt ein Tooltip das vollständige Datum.

Prop	Werte	Verwendung
Erstes Argument / `date`	String, `datetime`, `date` …	Anzuzeigendes Datum; ohne Angabe die aktuelle Zeit
`format`	Format wie `"YYYY-MM-DD"`	Anzeigeformat
`from_now` / `to_now`	`True` / `False`	Relative Zeit wie „vor 5 Minuten“ / „in 5 Minuten“
`from_now_short`	`True` / `False`	Kurzform wie „1h“, „2d“
`from_now_during`	Millisekunden	Nur so lange relative Zeit, danach `format`
`add` / `subtract`	`rx.MomentDelta(...)`	Addiert oder subtrahiert nur für die Anzeige
`tz`	Zeitzone wie `"Asia/Seoul"`	Anzeige in dieser Zeitzone
`locale`	`"fr"` `"ko"` …	Sprache dieser Komponente; Standard `"en"`
`interval`	Millisekunden (0 = angehalten)	Regelmäßig neu zeichnen
`with_title` / `title_format`		Vollständiges Datum beim Darüberfahren mit der Maus und dessen Format
`diff` · `unit` · `decimal`		Differenz zweier Daten
`duration` · `duration_from_now` · `trim`		Anzeige verstrichener Zeit
`unix` · `parse` · `local`		Wie das Eingabedatum gelesen wird; Ausgabe in Ortszeit
`on_change`	Event	Beim ersten Erscheinen und bei jedem Neuzeichnen des Datums

Relative Zeit

Oft ist „wie lange her“ leichter zu lesen als das Datum selbst. from_now zeigt den Abstand vom Datum bis jetzt („2 hours ago“), to_now die umgekehrte Richtung („in 2 hours“). from_now_short kürzt auf etwa „2h“. Mit from_now_during=100000 gibt es nur 100 Sekunden lang eine relative Zeit, danach erscheint das Datum gemäß 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"),
)

Format

Mit format gestaltest du die gewünschte Darstellung.

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"),
)

Daten addieren und subtrahieren

Übergibst du add und subtract ein rx.MomentDelta, bleibt das Datum im State unverändert, und nur die Anzeige wird verschoben. Die Schlüssel sind years, quarters, months, weeks, days, hours, minutes und seconds; Reflex 0.10 kennt außerdem milliseconds. Links jeweils plus 2, rechts minus 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",
)

Sprache

rx.moment ist standardmäßig englisch; nur Komponenten mit locale wechseln in diese Sprache. Andere Komponenten oder Seiten sind davon nicht betroffen. Bei einem festen Sprachnamen wird nur diese Sprachdatei geladen, bei einem State-Wert alle Sprachdateien.

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"),
)

Zeitzone

Mit tz erscheint derselbe Moment in der Ortszeit dieser Region. Das z im Format ist das Zeitzonenkürzel.

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"),
)

Im Browser regelmäßig neu zeichnen

Ohne Datum wird die aktuelle Zeit des Browsers verwendet. Mit interval (Millisekunden) wird in diesem Abstand neu gezeichnet – so entsteht eine Uhr. Sie läuft nur im Browser, ohne Austausch mit dem Server.

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

on_change

on_change wird aufgerufen, wenn die Komponente zum ersten Mal erscheint und jedes Mal, wenn das Datum neu gezeichnet wird, und übergibt den Datumsstring. Auch mit interval=0, also ohne regelmäßiges Neuzeichnen, wird es beim ersten Erscheinen einmal aufgerufen. Erscheint die Komponente durch Neuladen oder einen Seitenwechsel erneut, wird es wieder aufgerufen, und im Entwicklungsmodus kann es wegen des React Strict Mode anfangs zweimal kommen. Ist der Schalter an, wird es alle 2 Sekunden aufgerufen.

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"),
)

Weitere Props

Diese Funktionen stehen nur in der Prop-Tabelle der offiziellen Doku. Von oben: Datumsdifferenz (Tage), Datumsdifferenz (Monate, mit Dezimalstellen), verstrichene Zeit zwischen zwei Zeitpunkten, seit dem Datum bis jetzt verstrichene Zeit, Lesen eines Unix-Zeitstempels (Sekunden), Lesen in einem vorgegebenen Format (parse) und eine relative Zeit, die beim Darüberfahren mit der Maus das vollständige Datum zeigt.

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"),
)

Auftrag erledigt

Unter die Bewertung kommt klein die relative Zeit, und mit with_title erscheint beim Darüberfahren mit der Maus der genaue Zeitpunkt. Wegen interval=30000 wechselt die Anzeige alle 30 Sekunden von selbst, etwa von „a few seconds ago“ zu „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",
)

Werkstattnotizen

rx.moment(Datum, format="YYYY-MM-DD") formatiert; from_now/to_now ergeben relative Zeiten.
add/subtract=rx.MomentDelta(days=2) verschiebt das Datum nur in der Anzeige.
tz für die Zeitzone, locale für eine Sprache nur dieser Komponente (Standard Englisch).
Ohne Datum und mit interval=1000 eine Browseruhr. on_change wird auch beim ersten Erscheinen aufgerufen.

← Zurück

Datenanzeige · Scroll Area

Weiter →

Auf- und Zuklappen · Tabs

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

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

Built with Reflex