Localization of Dates and Times with Flask-Moment

Previous post: Get started with Python Flask Framework on IBM Bluemix

Flask-Moment is an extension for Flask applications that integrates moment.js into Jinja2 templates. Flask-Moment is installed with pip

For locally:

$ pip install flask-moment

For Bluemix:

In requirements.txt add:
Flask-moment==0.5.1
In hello.py: Initialize Flask-Moment
from flask_moment import Moment
moment= Moment(app)  
Add moment.js into base template base.html
In templates/base.html: Import moment.js library
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}  
To work with timestamps Flask-Moment makes a moment class available to templates. In hello.py passes a variable called current_time to the template for rendering.
In hello.py: Add a datetime variable.
from datetime import datetime
@app.route('/')
def index():
return render_template('index.html', current_time=datetime.utcnow())
Render current_time in the template.
In templates/index.html: Timestamp rendering with Flask-Moment
<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>  
The problem is that the can not be refresh because you render the index page. the current_time variable is defined in server, not in the browser. Another way to load local date and time and refresh it every second, is to use script snippet:
In the “index.html”:
<h3>Local time:<span id="timestamp"></span></h3>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- the script for refresh current time -->
<script>
var update = function () {
// using jQuery (really not a must):
$("#timestamp").html(moment().format('MMMM Do YYYY, h:mm:ss a'));
// or without jquery
document.getElementById("timestamp").innerHTML = moment().format('MMMM Do YYYY, h:mm:ss a');
};

$(document).ready(function(){
setInterval(update, 100);
});
</script>
The result will be:

This work is based on the book named Flask Web Development


Comments

Popular posts from this blog

Final report for Open IoT Challenge 3.0

MQTT demo

Overview and Architecture of Wireless Sensor Network System (WSN)