web-dev-qa-db-fra.com

DatePickerWidget avec Flask, Flask-Admin et WTforms

J'essaie de rendre un modèle qui contient un DatePicker, mais j'obtiens une erreur 500 lorsque j'essaie. Pour moi, le code est correct, mais il semble que quelque chose échoue ou je ne comprends pas correctement la façon de le faire.

Le code est le suivant:

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)

Modèle de rapport:

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

    {% if form %}
        {{form.start_date}}
    {% endif %}
{% endblock %}
flaskjinja2wtformsflask-wtformsflask-admin
19
Pepeluis

Comme le dit le davidisme dans les commentaires, le champ par défaut DateField fournit simplement une analyse de la date, il sera simplement affiché comme une entrée de texte normale.

Si vous êtes prêt à adopter pleinement html5, vous pouvez utiliser le champ DateField de wtforms.fields.html5 Qui affichera un sélecteur de date dans n'importe quel navigateur qui le prend en charge:

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)

L'approche la plus courante consiste à trouver un Nice datepicker en ligne, qui utilise CSS et JS pour gérer son affichage et inclure ce code dans votre modèle html, et lui dire d'appliquer le style datepicker à tout élément html qui a une classe de datepicker. Ensuite, lorsque vous générez votre formulaire, vous pouvez simplement faire:

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

Tous les attributs (qui ne sont pas réservés à une autre utilisation) que vous passez dans le rendu de l'élément de formulaire l'ajouteront par défaut comme attribut, par exemple la {{ form.dt(class='datepicker') }} générera <input class="datepicker" id="dt" name="dt" type="text" value=""> Pour que votre CSS/JS peut alors faire tout ce qu'il doit faire pour fournir une bonne interface à votre utilisateur.

31
Doobeh