Formatting of dates and times in Flask templates using moment.js.

Overview

Flask-Moment

Build Status

This extension enhances Jinja2 templates with formatting of dates and times using moment.js.

Quick Start

Step 1: Initialize the extension:

from flask_moment import Moment
moment = Moment(app)

Step 2: In your <head> section of your base template add the following code:

<head>
    {{ moment.include_jquery() }}
    {{ moment.include_moment() }}
</head>

This extension also supports the Flask application factory pattern by allowing you to create a Moment object and then separately initialize it for an app:

    moment = Moment()

    def create_app(config):
        app = Flask(__name__)
        app.config.from_object(config)
        # initialize moment on the app within create_app()
        moment.init_app(app)

    app = create_app(prod_config)

Note that jQuery is required. If you are already including it on your own then you can remove the include_jquery() line. Secure HTTP is always used to request the external js files..

The include_jquery() and include_moment() methods take some optional arguments. If you pass a version argument to any of these two calls, then the requested version will be loaded from the default CDN. If you pass local_js, then the given local path will be used to load the library. The include_moment() argument takes a third argument no_js that when set to True will assume that the Moment JavaScript library is already loaded and will only add the JavaScript code that supports this extension.

Step 3: Render timestamps in your template. For example:

<p>The current date and time is: {{ moment().format('MMMM Do YYYY, h:mm:ss a') }}.</p>
<p>Something happened {{ moment(then).fromTime(now) }}.</p>
<p>{{ moment(then).calendar() }}.</p>

In the second and third examples template variables then and now are used. These must be instances of Python's datetime class, and must be "naive" objects. See the documentation for a discussion of naive date and time objects. As an example, now can be set as follows:

now = datetime.utcnow()

By default the timestamps will be converted from UTC to the local time in each client's machine before rendering. To disable the conversion to local time pass local=True.

Note that even though the timestamps are provided in UTC the rendered dates and times will be in the local time of the client computer, so each users will always see their local time regardless of where they are located.

Function Reference

The supported list of display functions is shown below:

  • moment(timestamp=None, local=False).format(format_string=None)
  • moment(timestamp=None, local=False).fromNow(no_suffix=False)
  • moment(timestamp=None, local=False).fromTime(another_timesatmp, no_suffix=False)
  • moment(timestamp=None, local=False).toNow(no_suffix=False)
  • moment(timestamp=None, local=False).toTime(another_timesatmp, no_suffix=False)
  • moment(timestamp=None, local=False).calendar()
  • moment(timestamp=None, local=False).valueOf()
  • moment(timestamp=None, local=False).unix()

Consult the moment.js documentation for details on these functions.

Auto-Refresh

All the display functions take an optional refresh argument that when set to True will re-render timestamps every minute. This can be useful for relative time formats such as the one returned by the fromNow() or fromTime() functions. By default refreshing is disabled.

Default Format

The format() function can be invoked without arguments, in which case a default format of ISO8601 defined by the moment.js library is used. If you want to set a different default, you can set the MOMENT_DEFAULT_FORMAT variable in the Flask configuration. Consult the moment.js format documentation for a list of accepted tokens.

Internationalization

By default dates and times are rendered in English. To change to a different language add the following line in the <head> section after the include_moment() line:

{{ moment.locale("es") }}

The above example sets the language to Spanish. Moment.js supports a large number of languages, consult the documentation for the list of languages and their two letter codes.

The extension also supports auto-detection of the client's browser language:

{{ moment.locale(auto_detect=True) }}

Custom locales can also be included as a dictionary:

{{ moment.locale(customizations={ ... }) }}

See the Moment.js locale customizations documentation for details on how to define a custom locale.

Ajax Support

It is also possible to create Flask-Moment timestamps in Python code, for cases where a template is not used. This is the syntax:

timestamp = moment.create(datetime.utcnow()).calendar()

The moment variable is the Moment instance that was created at initialization time.

A timestamp created in this way is an HTML string that can be returned as part of a response. For example, here is how a timestamp can be returned in a JSON object:

return jsonify({ 'timestamp': moment.create(datetime.utcnow()).format('L') })

The Ajax callback in the browser needs to call flask_moment_render_all() each time an element containing a timestamp is added to the DOM. The included application demonstrates how this is done.

Subresource Integrity(SRI)

SRI is a security feature that enables browsers to verify that resources they fetch are not maliciously manipulated. To do so a cryptographic hash is provided that proves integrity.

SRI is enabled by default. If you wish to use another version or want to host your own javascript, a separate hash can be provided. Just add sri=<YOUR-HASH> when calling either moment.include_moment() or moment.include_jquery(). If no sri hash is provided and you choose to use a non default version of javascript, no sri hash will be added.

You can always choose to disable sri. To do so just set sri=False.

Development

Currently the tests are written using pytest.

pip install pytest

To run the tests from the root directory use: py.test.

Reports on coverage with missing line numbers can be generated using pytest-cov:

pip install pytest-cov

And then running: py-test --cov-report term-missing --cov=flask_moment

Owner
Miguel Grinberg
Miguel Grinberg
Implement Instagram with flask

Blue club The place where manly men live and breathe. Move to Notion Move to Fig

3 Apr 07, 2022
An easy way to build your flask skeleton.

Flider What is Flider Flider is a lightweight framework that saves you time by creating a MVC compliant file structure and includes basic commonly use

Trevor Engen 8 Nov 17, 2022
A web application made with Flask that works with a weather service API to get the current weather from all over the world.

Weather App A web application made with Flask that works with a weather service API to get the current weather from all over the world. Uses data from

Christian Jairo Sarmiento 19 Dec 02, 2022
Beautiful Interactive tables in your Flask templates.

flask-tables Beautiful interactive tables in your Flask templates Resources Video demonstration: Go to YouTube video. Learn how to use this code: Go t

Miguel Grinberg 209 Jan 05, 2023
Flask RESTful Web services using API to communicate between client and server.

Welcome! Open up two terminals, one for client and for server each Terminal 1 Terminal 2 Now navigate to the CW2_code directory in both like so $ cd C

Sehra Elahi 1 Nov 23, 2021
Library books management program, built with Flask, Python

Library books management program, With many features and good User Interface. built with Flask, Python. (Include Screenshots) and documentation on how to run it! Thank you :)

Thierry Mugisha 1 May 03, 2022
A boilerplate Flask API for a Fullstack Project :rocket:

Flask Boilerplate to quickly get started with production grade flask application with some additional packages and configuration prebuilt.

Yasser Tahiri 32 Dec 24, 2022
An extension to add support of Plugin in Flask.

An extension to add support of Plugin in Flask.

Doge Gui 31 May 19, 2022
Flask app + (html+css+ajax) contain ability add employee and place where employee work - plant or salon

#Manage your employees! With all employee information stored in one place, you no longer have to sift through hoards of spreadsheets to manually searc

Kateryna 1 Dec 22, 2021
OpenTracing instrumentation for the Flask microframework

Flask-OpenTracing This package enables distributed tracing in Flask applications via The OpenTracing Project. Once a production system contends with r

3rd-Party OpenTracing API Contributions 133 Dec 19, 2022
Freezes a Flask application into a set of static files.

Frozen-Flask Freezes a Flask application into a set of static files. The result can be hosted without any server-side software other than a traditiona

Frozen Flask 737 Dec 19, 2022
flask extension for integration with the awesome pydantic package

Flask-Pydantic Flask extension for integration of the awesome pydantic package with Flask. Installation python3 -m pip install Flask-Pydantic Basics U

248 Dec 26, 2022
A Flask web application that manages student entries in a SQL database

Student Database App This is a Flask web application that manages student entries in a SQL database. Users can upload a CSV into the SQL database, mak

rebecca 1 Oct 20, 2021
This is a Flask web app which predicts fare of Flight ticket

Flight Fare Prediction: Table of Content Demo Overview Motivation Installation Deployement on Heroku Directory Tree Bug / Feature Request Future scope

Ayshwarya 1 Jan 24, 2022
Example Flask application illustrating some of my common practices

Overholt Overholt is an example Flask application illustrating some of my common practices Development Environment At the bare minimum you'll need the

Matt Wright 1.6k Dec 15, 2022
Rubik's cube assistant on Flask webapp

webcube Rubik's cube assistant on Flask webapp. This webapp accepts the six faces of your cube and gives you the voice instructions as a response. Req

Yash Indane 56 Nov 22, 2022
This is a simple web application using Python Flask and MySQL database.

Simple Web Application This is a simple web application using Python Flask and MySQL database. This is used in the demonstration of development of Ans

Alaaddin Tarhan 1 Nov 16, 2021
Flask webassets integration.

Integrates the webassets library with Flask, adding support for merging, minifying and compiling CSS and Javascript files. Documentation: https://flas

Michael Elsdörfer 433 Dec 29, 2022
A Fast API style support for Flask. Gives you MyPy types with the flexibility of flask

Flask-Fastx Flask-Fastx is a Fast API style support for Flask. It Gives you MyPy types with the flexibility of flask. Compatibility Flask-Fastx requir

Tactful.ai 18 Nov 26, 2022
Pagination support for flask

flask-paginate Pagination support for flask framework (study from will_paginate). It supports several css frameworks. It requires Python2.6+ as string

Lix Xu 264 Nov 07, 2022