DatePickerWidget mit Flask, Flask-Admin und WTforms

Question

Ich versuche, eine Vorlage zu rendern, die einen DatePicker enthält, aber ich bekomme einen 500 Fehler, wenn ich es versuche. Für mich ist der Code korrekt, aber es scheint, dass etwas scheitert oder ich die Vorgehensweise nicht richtig verstehe.

Der Code ist folgende:

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) 

Berichtsvorlage:

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

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

Answer 1

Wie davidism in den Kommentaren sagt, bietet die Standard-Datefield nur Parsing Datum, es wird nur als normale Texteingabe angezeigt.

Wenn Sie bereit sind zu voll umarmen html5 dann können Sie die Datefield von wtforms.fields.html5 verwenden, die eine Datepicker in jedem Browser übertragen werden, die es unterstützt:

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) 

Der üblichere Ansatz ist ein schönes Datepicker zu finden online, das verwendet CSS und JS, um die Anzeige zu bearbeiten und diesen Code in Ihre HTML-Vorlage einzufügen, und weist sie an, den Datepicker-Stil auf jedes HTML-Element mit einer Klasse von datepicker anzuwenden. Dann, wenn Sie Ihre Form erzeugen können Sie einfach tun:

<!-- 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> 

alle Attribute (die nicht für andere Zwecke reserviert sind) Sie gelangen in das Formularelement-Rendering wird standardmäßig nur fügen Sie es als ein Attribut, zum Beispiel die {{ form.dt(class='datepicker') }} generiert <input class="datepicker" id="dt" name="dt" type="text" value="">, damit Ihr CSS/JS dann tun kann, was es tun muss, um eine gute Schnittstelle für Ihren Benutzer bereitzustellen.