Plantillas con Jinja2 en el matraz formato de fecha y hora con moment.js

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 que usa Jinja2 de manera modular y cómo crear procesadores de contexto, filtros y macros personalizados en Jinja2.. 

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

Empezando

El formato de fecha y hora es algo doloroso de manejar en aplicaciones web. Manejarlos a nivel de Python, usar la biblioteca datetime, 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 luego las marcas de tiempo deben procesarse cada vez que deben presentarse a los usuarios de todo el mundo..

Es una cosa inteligente aplazar este procesamiento hacia el 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 puede incluirse en nuestra aplicación de la siguiente manera. Solo tendremos que colocar el archivo JS., momento.min.js, en el static / js carpeta. Esto se puede usar en nuestro archivo HTML agregando la siguiente declaración junto con otras bibliotecas JS:

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:

>>> momento (). calendario (); "Hoy a las 9:37 pm" >>> momento (). EndOf ('día'). FromNow (); "en 2 horas" >>> momento (). formato ('LLLL'); "Miércoles 27 de enero de 2016 a las 21: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 jinja2 Variables de entorno. Consulte este ejecutable para obtener más información. Agrega un archivo llamado momentjs.py al mismo nivel que my_app.py.

flask_app / momentjs.py

from jinja2 import Markup class momentjs (objeto): def __init __ (self, timestamp): self.timestamp = timestamp # Wrapper to call moment.js método def render (self, format): return Markup (""% (self.timestamp.strftime ("% Y-% m-% dT% H:% M:% S "), formato)) # Formato tiempo def formato (self, fmt): return self.render (" format (\ "% s \") "% fmt) def calendar (self): return self.render (" calendar () ") def fromNow (self): return self.render (" fromNow () ")

Añade la siguiente línea en flask_app / my_app.py después aplicación inicialización Esto agregará la momentjs clase a jinja Variables de entorno.

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

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

Hora actual: momentjs (timestamp) .calendar ()


Hora: momentjs (timestamp) .format ('YYYY-MM-DD HH: mm: ss')


Desde ahora: momentjs (timestamp) .fromNow ()

 

Conclusión

En esta serie de tutoriales, cubrimos 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, filtros y macros personalizados que son muy útiles en las plantillas avanzadas. El último tutorial cubrió cómo se puede utilizar moment.js junto con Jinja2 para crear un formato de fecha y hora altamente flexible y poderoso.