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
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.
Display the date as-is:
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.
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.
Formatting dates
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
Subtract
Locales
Each rx.moment defaults to English. Set locale on a component to render it
in another language; other components and pages keep their own locale.
Timezones
You can also set dates to display in a specific timezone:
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.
The on_change event fires when the component mounts and whenever the date is updated.
Starting with reflex-components-moment 0.9.4, this includes static dates and
interval=0: disabling periodic updates does not suppress the initial event.
It fires again when the component remounts, such as after a reload or route navigation.
React Strict Mode can invoke the mount event twice in development, so handlers with
side effects should account for repeated calls.
Connect an event handler with the on_change prop:
API Reference
rx.moment
The Moment component.
Props
| Prop | Type | 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 | Union[bool, str] | When formatting duration time, the largest-magnitude tokens are automatically trimmed when they have no value. Also accepts a trim template: "large", "small", "both", "all", "final", "left" or "right". |
parse | Union[str, list] | Use the parse attribute to tell moment how to parse the given date when non-standard. Accepts a single format string or a list of formats to try. |
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 | Union[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 for this component. |