web-dev-qa-db-ja.com

Flask、Flask-Admin、WTformsを使用したDatePickerWidget

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 %}
19
Pepeluis

Davidismがコメントで述べているように、デフォルトの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。次に、フォームを生成するときに、次のことを実行できます。

_<!-- 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は、ユーザーに適切なインターフェースを提供するために必要なことをすべて実行できます。

31
Doobeh