Intro

Gallery

Hosting

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Datadisplay

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.

from datetime import datetime, timezone


class MomentState(rx.State):
    date_now: datetime = datetime.now(timezone.utc)

    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:

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.

rx.moment(MomentState.date_now, from_now=True)

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.

rx.moment(
    MomentState.date_now, from_now_during=100000
)  # after 100 seconds, date will display normally

Formatting dates

rx.moment(MomentState.date_now, format="YYYY-MM-DD")

rx.moment(MomentState.date_now, format="HH:mm:ss")

Offset Date

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

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(months=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",
    ),
)

Timezones

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

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.

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:

class MomentLiveState(rx.State):
    updating: bool = False

    def on_update(self, date):
        return rx._x.toast(f"Date updated: {date}")


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

Moment

The Moment component.

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_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	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.