flask - 带有 Flask、Flask-Admin 和 WTforms 的 DatePickerWidget

Question

我正在尝试呈现一个包含 DatePicker 的模板，但在尝试时出现 500 错误。对我来说，代码是正确的，但似乎有些事情失败了，或者我没有正确理解这样做的方法。

代码如下:

报告.py

from flask.ext.admin import BaseView, expose
from wtforms import DateField, Form
from wtforms.validators import Required
from flask.ext.admin.form import widgets
from flask import request

class DateRangeForm(Form):
    start_date = DateField('Start', validators=[Required()], format = '%d/%m/%Y', description = 'Time that the event will occur', widget=widgets.DatePickerWidget)

class ReportingView(BaseView):
    @expose('/')
    def index(self):
        form = DateRangeForm(request.form)
        return self.render('reporting.j2', form=form)

报告模板:

{% extends 'admin/master.html' %}
{% block body %}
    {{super()}}
    Working on it!

    {% if form %}
        {{form.start_date}}
    {% endif %}
{% endblock %}

Answer 1

正如 davidism 在评论中所说，默认的 DateField 只提供日期解析，它只会显示为普通的文本输入。

如果您准备好完全接受 html5，那么您可以使用来自 wtforms.fields.html5 的 DateField这将在支持它的任何浏览器中呈现日期选择器:

from flask import Flask, render_template
from flask_wtf import Form
from wtforms.fields.html5 import DateField
app = Flask(__name__)
app.secret_key = 'SHH!'


class ExampleForm(Form):
    dt = DateField('DatePicker', format='%Y-%m-%d')


@app.route('/', methods=['POST','GET'])
def hello_world():
    form = ExampleForm()
    if form.validate_on_submit():
        return form.dt.data.strftime('%Y-%m-%d')
    return render_template('example.html', form=form)


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

更常见的方法是在网上找到一个不错的日期选择器，它使用 CSS 和 JS 来处理它的显示并将该代码包含到您的 html 模板中，并告诉它将日期选择器样式应用于具有 datepicker 类的任何 html 元素。 .然后，当您生成表单时，您可以执行以下操作:

<!-- all your CSS and JS code, including the stuff -->
<!-- to handle the datepicker formatting -->

<form action="#" method="post">
    {{ form.dt(class='datepicker') }}
    {{ form.hidden_tag() }}
    <input type="submit"/>
</form>

您传递到呈现表单元素的任何属性(不保留用于其他用途)默认情况下只会将其添加为属性，例如 {{ form.dt(class='datepicker') }}将生成 <input class="datepicker" id="dt" name="dt" type="text" value="">这样你的 CSS/JS 就可以做任何它需要做的事情来为你的用户提供一个好的界面。