Flask & WTForms：显示日期的 DatePicker 小部件答案

【问题标题】：Flask & WTForms: DatePicker Widget to display a dateFlask & WTForms：显示日期的 DatePicker 小部件
【发布时间】：2015-10-06 17:45:22
【问题描述】：

我有一个小型 Flask 应用程序，它具有三个字段（目标、开始时间和结束时间）。我想在选择开始和结束日期时使用 DatePicker 小部件来显示日历。

使用我当前的脚本，日期小部件根本不会产生。我在这里错过了什么？

app.py:

# -*- coding: utf-8 -*- 

from flask.ext.wtf import Form
from wtforms import SubmitField, SelectField, DateField
from flask import Flask, render_template, request
from flask.ext.bootstrap import Bootstrap
from flask.ext.admin.form.widgets import DatePickerWidget

class GeneralForm(Form):
    destination = SelectField(choices = data)
    start_time = DateField('Start at', widget=DatePickerWidget())
    end_time = DateField('End at', widget=DatePickerWidget())
    submit = SubmitField('Submit')

@app.route("/", methods=['GET', 'POST'])
def index():
    form = GeneralForm(request.form)
    if request.method == 'POST':
        destination = form.destination.data
        start_time = form.start_time.data
        end_time = form.end_time.data
        return render_template('page.html', form=form)
    else:
        return render_template('index.html', form=form)

bootstrap = Bootstrap(app)
if __name__ == '__main__':
    app.run(debug=True)

index.html:

<link rel="stylesheet"
      href="{{url_for('.static', filename='mystyle.css')}}">
<link rel="stylesheet"
      href="{{url_for('.static', filename='datepicker.css')}}">
<link rel="javascript"
      href="{{url_for('.static', filename='main.js')}}">
<link rel="javascript"
      href="{{url_for('.static', filename='bootstrap-datepicker.js')}}"

<form action="#" method="post">
     {{ form.destination }}
     {{ form.start_time(class='datepicker') }}
     {{ form.end_time(class='datepicker') }}
     {{ form.submit }}
</form>

【问题讨论】：

标签： python flask datepicker jinja2 datefield

【解决方案1】：

Flask-Admin 的DatePickerWidget() 基本上将data-date-format="YYYY-MM-DD" data-role="datepicker" 属性添加到输入字段。之后，位于 flask_admin/static/admin/js/form.js 中的自定义 JavaScript 函数会激活这些字段上的 Bootstrap-Datepicker 小部件。

所以你需要在你的模板中包含这个脚本（或编写你自己的）。在模板顶部添加这一行，其中包含一个辅助宏：

{% import 'admin/static.html' as admin_static with context %}

然后您可以通过将这些行添加到您的模板中来包含form.js（此脚本也需要moment.js）：

<script src="{{ admin_static.url(filename='vendor/moment.min.js') }}"></script>
<script src="{{ admin_static.url(filename='admin/js/form.js') }}"></script>

注意：您还可以使用 Flask-Admin 附带的 Bootstrap-Datepicker js 和 css 文件。查看flask_admin/templates/bootstrap3/admin/lib.html 中的form_css() 和form_js() 宏，并将相应的行复制到您的模板中。

【讨论】：

应用找不到模板 admin/static.html。导入行抛出 TemplateNotFound 错误。
事实上我已经从 github.com/flask-admin/flask-admin/tree/master/flask_admin/static/admin/ 添加了 form.js 和 moment.js。小部件仍未生成。

【解决方案2】：

您是否在页面顶部声明了 flask-bootstrap base.html 参考文件？

{% extends "bootstrap/base.html" as wtf %}

然后，您只需添加以下内容即可在页面中启动表单

{{ wtf.quick_form(form) }}

【讨论】：

是的，实际上我已经尝试过 {{ wtf.quick_form(form) }}。但是我仍然无法让 datepicker 小部件工作。感谢您的回复！