Moment · Library · Reflex Docs

For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.

NewReflex Agent Toolkit is launching. Get early access.

Custom Components

Library

Moment

Displaying date and relative time to now sometimes can be more complicated than necessary.

To make it easy, Reflex is wrapping react-moment under rx.moment.

Examples

Using a date from a state var as a value, we will display it in a few different ways using rx.moment.

The date_now state var is initialized when the site was deployed. The button below can be used to update the var to the current datetime, which will be reflected in the subsequent examples.

Display the date as-is:

Thu Sep 10 2026 12:30:37 GMT-0400

Humanized interval

Sometimes we don't want to display just a raw date, but we want something more instinctive to read. That's when we can use from_now and to_now.

Humanized interval examples:

a day ago
in a day

Formatting dates

2026-09-10
12:30:37

Offset Date

With the props add and subtract, you can pass an rx.MomentDelta object to modify the displayed date without affecting the stored date in your state.

Add

2028-09-10 - 12:30:37
2027-03-10 - 12:30:37
2026-11-10 - 12:30:37
2026-09-24 - 12:30:37
2026-09-12 - 12:30:37
2026-09-10 - 14:30:37
2026-09-10 - 12:32:37
2026-09-10 - 12:30:39

Subtract

2024-09-10 - 12:30:37
2026-03-10 - 12:30:37
2026-07-10 - 12:30:37
2026-08-27 - 12:30:37
2026-09-08 - 12:30:37
2026-09-10 - 10:30:37
2026-09-10 - 12:28:37
2026-09-10 - 12:30:35

Timezones

You can also set dates to display in a specific timezone:

Thu Sep 10 2026 09:30:37 GMT-0700
Thu Sep 10 2026 18:30:37 GMT+0200
Fri Sep 11 2026 01:30:37 GMT+0900

Client-side periodic update

If a date is not passed to rx.moment, it will use the client's current time.

If you want to update the date every second, you can use the interval prop.

API Reference

rx.moment - The Moment component.

Props

Prop	Type	Description
`interval`	`int`	How often the date update.
`format`	`str`	Formats the date according to the given format string.
`zoom`	`bool`	Display the diff as decimal.
`local`	`bool`	Outputs the result in local time.
`date`	`Union[str, datetime, date, time, timedelta]`	The date to display.

Event Triggers

Trigger	Description
`on_change`	Fires when the date changes.

Built with Reflex