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
ExpandCollapse
Subtract
ExpandCollapse
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.
Even better, you can actually link an event handler to the on_change prop that will be called every time the date is updated:
ExpandCollapse
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 | 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 | 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 to use when rendering. |