Advertisement
  1. Code
  2. Python

Creación de plantillas con Jinja2 en Flask: formato de fecha y hora con moment.js

Scroll to top
Read Time: 3 min
This post is part of a series called Templating With Jinja2 in Flask .
Templating With Jinja2 in Flask: Advanced

() translation by (you can also view the original English article)

En la primera y segunda parte de esta serie de tutoriales de tres partes, vimos cómo diseñar la estructura de la plantilla en una aplicación basada en Flask usando Jinja2 de manera modular y cómo crear procesadores de contexto personalizados, filtros y macros en Jinja2.

En esta parte, explicaremos cómo implementar el formato avanzado de fecha y hora a nivel de plantilla en Jinja2 usando moment.js.

Empecemos

El formato de fecha y hora es algo complicado de manejar en las aplicaciones web. Manejarlos al nivel de Python, usando la biblioteca de fecha y hora, aumenta la sobrecarga y es bastante complejo cuando se trata de manejar las zonas horarias correctamente. Deberíamos estandarizar las marcas de tiempo a UTC cuando se almacenan en la base de datos, pero después las marcas de tiempo deben procesarse cada vez que deben presentarse a los usuarios de todo el mundo.

Es inteligente posponer este procesamiento al lado del cliente, es decir, el navegador. El navegador siempre conoce la zona horaria actual del usuario y podrá realizar la manipulación de la fecha y la hora correctamente. Además, esto quita la sobrecarga necesaria de nuestros servidores de aplicaciones.

Al igual que cualquier biblioteca JS, Moment.js se puede incluir en nuestra aplicación de la siguiente manera. Sólo tendremos que colocar el archivo JS, moment.min.js, en la carpeta static/js. Esto se puede utilizar en nuestro archivo HTML agregando la siguiente instrucción junto con otras bibliotecas JS:

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

El uso básico de Moment.js se muestra en el siguiente código. Esto se puede hacer en la consola del navegador para JavaScript:

1
>>> moment().calendar();
2
"Today at 9:37 PM"
3
>>> moment().endOf('day').fromNow();
4
"in 2 hours"
5
>>> moment().format('LLLL');
6
"Wednesday, January 27, 2016 9:38 PM"

Para usar Moment.js en nuestra aplicación, la mejor manera será escribir un contenedor en Python y usarlo a través de las variables de entorno jinja2. Consulta este runnable para obtener más información. Agrega un archivo llamado momentjs.py al mismo nivel que my_app.py.

flask_app/momentjs.py

1
from jinja2 import Markup
2
3
class momentjs(object):
4
5
    def __init__(self, timestamp):
6
        self.timestamp = timestamp
7
8
        # Wrapper to call moment.js method

9
        def render(self, format):
10
            return Markup("<script>\ndocument.write(moment(\"%s\").%s);\n</script>" % (self.timestamp.strftime("%Y-%m-%dT%H:%M:%S"), format))
11
12
        # Format time

13
        def format(self, fmt):
14
            return self.render("format(\"%s\")" % fmt)
15
16
        def calendar(self):
17
            return self.render("calendar()")
18
19
        def fromNow(self):
20
            return self.render("fromNow()")

Agrega la siguiente línea en flask_app/my_app.py después de la inicialización de la app. Esto agregará la clase momentjs a las variables del entorno jinja.

1
# Set jinja template global

2
app.jinja_env.globals['momentjs'] = momentjs

Ahora, moment.js se puede usar para formatear la fecha y la hora en las plantillas de la siguiente manera:

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

Conclusión

En esta serie de tutoriales, hablamos sobre los conceptos básicos de las plantillas de Jinja2 desde la perspectiva de Flask. Comenzamos con los conceptos básicos de Jinja2 y aprendimos las mejores prácticas sobre cómo diseñar la estructura de la plantilla y aprovechar los patrones de herencia.

Luego, creamos algunos procesadores de contexto personalizados, filtros y macros que son muy útiles en las plantillas avanzadas. El tutorial final trató sobre cómo se puede utilizar moment.js junto con Jinja2 para crear un formato de fecha y hora altamente flexible y potente.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.