Advanced date and time formatting

Date and time formatting is a painful thing to handle in web applications. Handling them at the level of Python, using the datetime library increases the overhead and is pretty complex when it comes to handling time zones correctly. We should standardize the timestamps to UTC when stored in the database, but then, the timestamps need to be processed every time they need to be presented to the users worldwide.

It is a smart thing to defer this processing to the client side, that is, the browser. The browser always knows the current time zone of the user and will be able to do the date and time manipulation correctly. Also, this takes off the necessary overhead from our application servers. We will use Moment.js for this purpose.

Getting ready

Just like any JS library, Moment.js can be included in our app in the following manner. We will just have to place the JS file, moment.min.js, in the static/js folder. This can then be used in our HTML file by adding the following statement along with other JS libraries:

<script src="/static/js/moment.min.js"></script>

The basic usage of Moment.js is shown in the following code. This can be done in the browser console for JavaScript:

>>> moment().calendar();
"Today at 4:49 PM"
>>> moment().endOf('day').fromNow();
"in 7 hours"
>>> moment().format('LLLL');
"Tuesday, April 15 2014 4:55 PM"

How to do it…

To use Moment.js in our application, the best way will be to write a wrapper in Python and use it via jinja2 environment variables. Refer to http://runnable.com/UqGXnKwTGpQgAAO7/dates-and-times-in-flask-for-python for more information:

from jinja2 import Markup

class momentjs(object):
    def __init__(self, timestamp):
        self.timestamp = timestamp

    # Wrapper to call moment.js method
    def render(self, format):
        return Markup("<script>\ndocument.write(moment(\"%s\").%s);\n</script>" % (self.timestamp.strftime("%Y-%m-%dT%H:%M:%S"), format))

    # Format time
    def format(self, fmt):
        return self.render("format(\"%s\")" % fmt)

    def calendar(self):
        return self.render("calendar()")

    def fromNow(self):
        return self.render("fromNow()")

We can add as many Moment.js methods as we want to parse to the preceding class as and when needed. Now, in our app.py file, we can set this created class to the jinja environment variables:

# Set jinja template global
app.jinja_env.globals['momentjs'] = momentjs

We can use it in templates as follows:

<p>Current time: {{ momentjs(timestamp).calendar() }}</p>
<br/>
<p>Time: {{momentjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}}</p>
<br/>
<p>From now: {{momentjs(timestamp).fromNow()}}</p>

See more

• Read more about the Moment.js library at http://momentjs.com/