Question

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

代码如下：

Reporting.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

正如大卫在评论中所说，默认的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样式任何类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就可以做任何需要做的事情来为你的用户提供一个好的界面。

使用Flask，Flask-Admin和WTforms的DatePickerWidget

1 个答案: