Flask & WTForms： DatePicker Widget 用于显示日期

Question

我有一个小的Flask应用程序，它有三个字段(目的地，开始时间和结束时间)。我想使用DatePicker小部件在选择开始和结束日期时显示日历。

在我当前的脚本中，日期小部件根本不会生成。我遗漏了什么?

app.py:

# -*- coding: utf-8 -*- 
from flask.ext.wtf import Form
from wtforms import SubmitField, SelectField, DateField
from flask import Flask, render_template, request
from flask.ext.bootstrap import Bootstrap
from flask.ext.admin.form.widgets import DatePickerWidget
class GeneralForm(Form):
    destination = SelectField(choices = data)
    start_time = DateField('Start at', widget=DatePickerWidget())
    end_time = DateField('End at', widget=DatePickerWidget())
    submit = SubmitField('Submit')
@app.route("/", methods=['GET', 'POST'])
def index():
    form = GeneralForm(request.form)
    if request.method == 'POST':
        destination = form.destination.data
        start_time = form.start_time.data
        end_time = form.end_time.data
        return render_template('page.html', form=form)
    else:
        return render_template('index.html', form=form)
bootstrap = Bootstrap(app)
if __name__ == '__main__':
    app.run(debug=True)

index.html:

<link rel="stylesheet"
      href="{{url_for('.static', filename='mystyle.css')}}">
<link rel="stylesheet"
      href="{{url_for('.static', filename='datepicker.css')}}">
<link rel="javascript"
      href="{{url_for('.static', filename='main.js')}}">
<link rel="javascript"
      href="{{url_for('.static', filename='bootstrap-datepicker.js')}}"
<form action="#" method="post">
     {{ form.destination }}
     {{ form.start_time(class='datepicker') }}
     {{ form.end_time(class='datepicker') }}
     {{ form.submit }}
</form>

Answer 1

Flask-Admin的DatePickerWidget()基本上将data-date-format="YYYY-MM-DD" data-role="datepicker"属性添加到输入字段。之后，位于flask_admin/static/admin/js/form.js中的自定义JavaScript函数激活这些字段上的Bootstrap-Datepicker小部件。

所以你需要在你的模板中包含这个脚本(或者自己写)。在模板的顶部添加这一行，其中包括一个helper宏:

{% import 'admin/static.html' as admin_static with context %}

，然后你可以包括form.js通过添加这些行到你的模板(这个脚本也需要moment.js):

<script src="{{ admin_static.url(filename='vendor/moment.min.js') }}"></script>
<script src="{{ admin_static.url(filename='admin/js/form.js') }}"></script>

注意:你也可以使用Flask-Admin附带的Bootstrap-Datepicker js和css文件。参见flask_admin/templates/bootstrap3/admin/lib.html中的form_css()和form_js()宏，并将相应的行复制到您的模板中。

您是否在页面顶部声明了flask-bootstrap base.html参考文件?

{% extends "bootstrap/base.html" as wtf %}

您可以在您的页面中启动您的表单，只需添加以下

{{ wtf.quick_form(form) }}