在Flask中使用Jinja2进行模板制作：使用moment.js格式化日期和时间

在这个由三部分组成的教程系列的第一部分和第二部分中，我们看到了如何使用Jinja2以模块化的方式在基于Flask的应用程序中布局模板结构，以及如何在Jinja2中创建自定义上下文处理器，过滤器和宏。

在这一部分中，我们将介绍如何使用moment.js在Jinja2中的模板级别实现高级日期和时间格式。

入门

日期和时间格式在Web应用程序中很难处理。 使用datetime库在Python级别上处理它们会增加开销，并且在正确处理时区方面相当复杂。 当存储在数据库中时，我们应该将时间戳标准化为UTC，但是，每次需要将时间戳呈现给全球用户时，都需要对其进行处理。

将处理推迟到客户端（即浏览器）是很聪明的事情。 浏览器始终知道用户的当前时区，并且能够正确地进行日期和时间的操作。 此外，这还减少了我们应用程序服务器的必要开销。

就像任何JS库一样，Moment.js可以通过以下方式包含在我们的应用程序中。 我们只需要将JS文件moment.min.js放在static/js文件夹中即可。 然后，可以通过添加以下语句以及其他JS库在我们HTML文件中使用它：

以下代码显示了Moment.js的基本用法。 可以在JavaScript的浏览器控制台中完成此操作：

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

要在我们的应用程序中使用Moment.js，最好的方法是在Python中编写包装器，并通过jinja2环境变量使用它。 有关更多背景，请参考此可运行文件 。 添加一个名为momentjs.py在同一水平my_app.py 。

flask_app / momentjs.py

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("" % (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()")

app初始化后， flask_app/my_app.py添加到flask_app/my_app.py 。 这会将momentjs类添加到jinja环境变量中。

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

现在，可以使用moment.js来格式化模板中的日期和时间，如下所示：

Current time: {{ momentjs(timestamp).calendar() }}


Time: {{momentjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}}


From now: {{momentjs(timestamp).fromNow()}}

结论

在本教程系列中，我们从Flask的角度介绍了Jinja2模板的基础知识。 我们从Jinja2的基础知识入手，学习了有关如何布局模板结构和利用继承模式的最佳实践。

然后，我们创建了一些自定义上下文处理器，过滤器和宏，它们在高级模板中非常方便。 最后的教程介绍了如何将moment.js与Jinja2一起使用，以创建高度灵活且功能强大的日期时间格式。

翻译自: https://code.tutsplus.com/tutorials/templating-with-jinja2-in-flask-date-and-time-formatting-with-momentjs--cms-25813