使用Flask,Flask-Admin和WTforms的DatePickerWidget

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,那么您可以使用DateField,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元素datepicker.然后,当您生成表单时,您可以执行以下操作:

<!-- 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可以做任何它需要做的事情来提供适合您的用户的良好界面.