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

NewReflex Agent Toolkit is launching. Get early access.

[**Custom Components**](/content/docs/custom-components/index.html)

[Library](/content/docs/library/index.html)

# Moment

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

To make it easy, Reflex is wrapping [react-moment](https://www.npmjs.com/package/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](/content/site-root.html)