> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.moment --- # 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`. ```python exec import reflex as rx from reflex.utils.serializers import serialize_datetime ``` ## Examples Using a date from a state var as a value, we will display it in a few different way 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. ```python demo exec from datetime import datetime, timezone class MomentState(rx.State): date_now: datetime = datetime.now(timezone.utc) @rx.event def update(self): self.date_now = datetime.now(timezone.utc) def moment_update_example(): return rx.button( "Update", rx.moment(MomentState.date_now), on_click=MomentState.update ) ``` ### Display the date as-is: ```python demo rx.moment(MomentState.date_now) ``` ### 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`. ```python demo rx.moment(MomentState.date_now, from_now=True) ``` ```python demo rx.moment(MomentState.date_now, to_now=True) ``` You can also set a duration (in milliseconds) with `from_now_during` where the date will display as relative, then after that, it will be displayed as defined in `format`. ```python demo rx.moment( MomentState.date_now, from_now_during=100000 ) # after 100 seconds, date will display normally ``` ### Formatting dates ```python demo rx.moment(MomentState.date_now, format="YYYY-MM-DD") ``` ```python demo rx.moment(MomentState.date_now, format="HH:mm:ss") ``` ### 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 ```python demo rx.vstack( rx.moment( MomentState.date_now, add=rx.MomentDelta(years=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, add=rx.MomentDelta(quarters=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, add=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, add=rx.MomentDelta(weeks=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, add=rx.MomentDelta(days=2), format="YYYY-MM-DD - HH:mm:ss" ), rx.moment( MomentState.date_now, add=rx.MomentDelta(hours=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, add=rx.MomentDelta(minutes=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, add=rx.MomentDelta(seconds=2), format="YYYY-MM-DD - HH:mm:ss", ), ) ``` #### Subtract ```python demo rx.vstack( rx.moment( MomentState.date_now, subtract=rx.MomentDelta(years=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(quarters=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(weeks=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(days=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(hours=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(minutes=2), format="YYYY-MM-DD - HH:mm:ss", ), rx.moment( MomentState.date_now, subtract=rx.MomentDelta(seconds=2), format="YYYY-MM-DD - HH:mm:ss", ), ) ``` ### Timezones You can also set dates to display in a specific timezone: ```python demo rx.vstack( rx.moment(MomentState.date_now, tz="America/Los_Angeles"), rx.moment(MomentState.date_now, tz="Europe/Paris"), rx.moment(MomentState.date_now, tz="Asia/Tokyo"), ) ``` ### 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. ```python demo rx.moment(interval=1000, format="HH:mm:ss") ``` Even better, you can actually link an event handler to the `on_change` prop that will be called every time the date is updated: ```python demo exec class MomentLiveState(rx.State): updating: bool = False @rx.event def on_update(self, date): return rx.toast(f"Date updated: {date}") @rx.event def set_updating(self, value: bool): self.updating = value def moment_live_example(): return rx.hstack( rx.moment( format="HH:mm:ss", interval=rx.cond(MomentLiveState.updating, 5000, 0), on_change=MomentLiveState.on_update, ), rx.switch( is_checked=MomentLiveState.updating, on_change=MomentLiveState.set_updating, ), ) ``` ## API Reference ### rx.moment The Moment component. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `interval` | int | - | How often the date update (how often time update / 0 to disable). | | `format` | str | - | Formats the date according to the given format string. | | `trim` | bool | - | When formatting duration time, the largest-magnitude tokens are automatically trimmed when they have no value. | | `parse` | str | - | Use the parse attribute to tell moment how to parse the given date when non-standard. | | `add` | MomentDelta | - | Add a delta to the base date (keys are "years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"). | | `subtract` | MomentDelta | - | Subtract a delta to the base date (keys are "years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"). | | `from_now` | bool | - | Displays the date as the time from now, e.g. "5 minutes ago". | | `from_now_short` | bool | - | Displays the relative time in a short format using abbreviated units (e.g., "1h", "2d", "3mo", "1y" instead of "1 hour ago", "2 days ago", etc.). | | `from_now_during` | int | - | Setting fromNowDuring will display the relative time as with fromNow but just during its value in milliseconds, after that format will be used instead. | | `to_now` | bool | - | Similar to fromNow, but gives the opposite interval. | | `with_title` | bool | - | Adds a title attribute to the element with the complete date. | | `title_format` | str | - | How the title date is formatted when using the withTitle attribute. | | `diff` | str | - | Show the different between this date and the rendered child. | | `decimal` | bool | - | Display the diff as decimal. | | `unit` | str | - | Display the diff in given unit. | | `duration` | str | - | Shows the duration (elapsed time) between two dates. duration property should be behind date property time-wise. | | `date` | str, datetime, date, time, timedelta | - | The date to display (also work if passed as children). | | `duration_from_now` | bool | - | Shows the duration (elapsed time) between now and the provided datetime. | | `unix` | bool | - | Tells Moment to parse the given date value as a unix timestamp. | | `local` | bool | - | Outputs the result in local time. | | `tz` | str | - | Display the date in the given timezone. | | `locale` | str | - | The locale to use when rendering. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ Component-specific event triggers: | Event Trigger | Description | | --- | --- | | `on_change` | Fires when the date changes. |