带Flask，Flask-Admin和WTforms的DatePickerWidget [英] DatePickerWidget with Flask, Flask-Admin and WTforms

问题描述

我试图渲染一个包含DatePicker的模板，但是当我尝试的时候出现了500错误。对于我的代码是正确的，但似乎有什么失败，或者我不是正确理解的方式来做到这一点。

代码如下： p>

Reporting.py

  from flask.ext.admin import BaseView，expose来自wtforms的
从wtforms.validators中导入DateField，
从flask.ext.admin.form导入必需的
导入窗口小部件$ b $从烧瓶导入请求
 
类DateRangeForm（Form）：
 start_date = DateField（'Start'，validators = [Required（）]，format ='％d /％m /％Y'，description ='事件发生的时间'， widget = Widgets.DatePickerWidget）
 $ b $ class ReportingView（BaseView）：
 @expose（'/'）
 def index（self）：$ b $ form = DateRangeForm（request .form）
 return self.render（'reporting.j2'，form = form）
  

报告模板：

  {％extends'admin / master.html'％} 
 {％block body％} 
 {{super（）}} 
使用它！ 
 $ b $ {％if form％} 
 {{form.start_date}} 
 {％endif％} 
 {％endblock％} 
  
 
如果您已经准备好完全接受html5，那么您可以使用 wtforms.fields中的DateField .html5 这将在任何支持它的浏览器中显示一个日期选择器：
  from flask import Flask， render_template $ b $ from flask_wtf import $ form $ b $ from wtforms.fields.html5 import DateField 
 app = Flask（__ name__）
 app.secret_key ='SHH！'
 
 
 class ExampleForm（Form）：
 dt = DateField（'DatePicker'，format ='％Y-％m-％d'）
 
 
 @app （）：
 form = ExampleForm（）$ b $如果form.validate_on_submit（）：
返回表单。 dt.data.strftime（'％Y-％m-％d'）
 return render_template（'example.html'，form = form）
 
 
 if __name__ == '__main__'：
 app.run（debug = True）
  
在网上找到一个不错的日期选择器，这是使用CSS和JS来处理它的显示，并将该代码包含到您的HTML模板中，并告诉它将datepicker样式应用于任何具有 datepicker 。然后当你生成表单时，你可以这样做： 
 
 
 <！ - 所有的CSS和JS代码，包括东西 - > 
 <！ - 处理日期选择器格式化 - > 
 
< form action =＃method =post> 
 {{form.dt（class ='datepicker'）}} 
 {{form.hidden_​​tag（）}} 
< input type =submit/> 
< / form> 
  
您传递给表单元素的任何属性（不保留用于其他用途）将通过默认只是添加它作为一个属性，例如 {{form.dt（class ='datepicker'）}} 将生成< input class =datepickerid =dtname =dttype =textvalue => 然后你的CSS / JS就可以做任何事情来提供一个好的界面为您的用户。
 
I'm trying to render a template that contains a DatePicker, but I'm getting a 500 error when I try. For my the code is correct, but it seems that something is failing or I'm not understanding correctly the way to do it.

The code is the following:

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)
Reporting template:
{% extends 'admin/master.html' %}
{% block body %}
    {{super()}}
    Working on it!

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

解决方案
As davidism says in the comments, the default DateField just provides date parsing, it'll just be displayed as a normal text-input.

If you're ready to fully embrace html5 then you can use the DateField from wtforms.fields.html5 which will render a datepicker in any browser that supports it:
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)
The more usual approach is to find a nice datepicker online, that's using CSS and JS to handle it's display and include that code into your html template, and tell it to apply the datepicker style to any html element that has a class of datepicker.  Then when you generate your form you can just do:
<!-- 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>
Any attributes (that aren't reserved for other use) you pass into rendering the form element will by default just add it as an attribute, for example the {{ form.dt(class='datepicker') }} will generate <input class="datepicker" id="dt" name="dt" type="text" value=""> so your CSS/JS can then do whatever it needs to do to provide a good interface for your user.

                        
这篇关于带Flask，Flask-Admin和WTforms的DatePickerWidget的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！