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.

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.

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.

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.

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

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: