热门标签:
Q:

DatePickerWidget与Flask,Flask-Admin和WTforms

我试图呈现一个包含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 %}
原网址
A:

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

如果你已经准备好完全接受html5,那么你可以使用DateField fromwtforms.fields.html5,它将在任何支持它的浏览器中呈现一个datepicker:

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)

更常见的方法是在网上找到一个不错的datepicker,即使用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可以做任何需要做的事情,为您的用户提供一个好的界面。

相似问题