ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

数据展示

Moment

rx.momentrx.MomentDelta

官方文档

工坊订单

请在评论列表每条评论下方，用“3 分钟前”“2 小时前”这样的相对时间显示发布时间。鼠标悬停时还要能看到准确时间。

rx.moment 是封装了 react-moment 的日期显示组件。它在浏览器里把日期转换成想要的格式，并处理“5 分钟前”这样的相对时间和时区转换。

本页的示例使用下面 State 里的 date_now。它是服务器启动时的时刻（UTC），点击 "Update" 会换成当前时刻，并同时反映到下面各个示例里。Reflex 文档直接把 datetime 放进 State，这里则存成 ISO 字符串。rx.moment 两种都接受。

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

试着改属性

format 的标记遵循 moment.js 规则（YYYY 年、MM 月、DD 日、HH 时、mm 分、ss 秒、ddd 星期）。打开 from_now 后，显示的是相对时间而不是格式化的日期。

试着改属性

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)

改变 tz，同一时刻会显示为当地时间。打开 with_title 后把鼠标悬停上去，完整日期会以工具提示出现。

属性	取值	用途
第一个参数 / `date`	字符串、`datetime`、`date` …	要显示的日期。不传时为当前时刻
`format`	`"YYYY-MM-DD"` 这样的格式	显示格式
`from_now` / `to_now`	`True` / `False`	像“5 分钟前”/“5 分钟后”这样的相对时间
`from_now_short`	`True` / `False`	简写成 "1h"、"2d"
`from_now_during`	毫秒	只在这段时间内显示相对时间，之后按 `format` 显示
`add` / `subtract`	`rx.MomentDelta(...)`	只在显示时加上或减去一段时间
`tz`	`"Asia/Seoul"` 这样的时区	按该时区显示
`locale`	`"fr"` `"ko"` …	这个组件的语言。默认 `"en"`
`interval`	毫秒（0 表示停止）	定期重新渲染
`with_title` / `title_format`		鼠标悬停时显示的完整日期及其格式
`diff` · `unit` · `decimal`		两个日期之差
`duration` · `duration_from_now` · `trim`		显示经过的时间
`unix` · `parse` · `local`		输入日期的解析方式、按本地时间输出
`on_change`	事件	首次出现时以及日期重新渲染时

相对时间

比起直接显示日期，“多久以前”往往更易读。from_now 显示从现在看那个日期的时间（"2 hours ago"），to_now 显示反方向（"in 2 hours"）。from_now_short 会缩写成 "2h"。from_now_during=100000 表示只在 100 秒内显示相对时间，之后按 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 拼出想要的样子。

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

日期的加减

把 rx.MomentDelta 传给 add 和 subtract，State 里的日期保持不变，只在显示时移动日期。键有 years、quarters、months、weeks、days、hours、minutes、seconds，Reflex 0.10 还有 milliseconds。左列是各加 2，右列是各减 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",
)

语言

rx.moment 默认是英语，只有设置了 locale 的组件才会换成那种语言，不影响其他组件或页面。传入固定的语言名时只加载那一个语言文件；传入 State 值时会加载全部语言文件。

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

时区

传入 tz，同一时刻就会显示为该地区的时间。格式里的 z 是时区缩写。

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

在浏览器中定期重新渲染

不传日期时使用浏览器的当前时刻。传入 interval（毫秒）后，每隔这段时间重新渲染一次，就成了一个时钟。它只在浏览器里运行，不与服务器通信。

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

on_change

on_change 在组件首次出现时以及每次日期重新渲染时被调用，并传入那个日期字符串。即使 interval=0 不定期重新渲染，首次出现时也会调用一次。刷新或切换页面后再次出现时会再调用；开发模式下由于 React Strict Mode，开始时可能会调用两次。打开开关后每 2 秒调用一次。

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

其他属性

这些功能只出现在官方文档的属性表里。从上到下依次是：日期之差（天）、日期之差（月，带小数）、两个时刻之间经过的时间、从那个日期到现在经过的时间、解析 Unix 时间戳（秒）、按指定格式读取（parse）、鼠标悬停时显示完整日期的相对时间。

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

完成订单

在评论下方用小字显示相对时间，并用 with_title 让鼠标悬停时显示准确时间。因为 interval=30000，每 30 秒 "a few seconds ago" 会自动变成 "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",
)

工坊笔记

用 rx.moment(日期, format="YYYY-MM-DD") 改变格式，用 from_now/to_now 显示相对时间。
add/subtract=rx.MomentDelta(days=2) 只在显示时移动日期。
tz 设置时区，locale 设置仅属于这个组件的语言（默认英语）。
不传日期、interval=1000 就是浏览器时钟。on_change 在首次出现时也会被调用。

← 上一课

数据展示 · Scroll Area

下一课 →

展开与切换 · Tabs

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

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

Built with Reflex