Flask和WTForms：DatePicker小部件显示日期

Question

Flask和WTForms：DatePicker小部件显示日期

5

我有一个小的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>

- jjjayn

2个回答

0

你是否在页面顶部声明了 flask-bootstrap 的 base.html 引用文件？

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

然后，您可以通过简单地添加以下内容在页面中启动表单

{{ wtf.quick_form(form) }}

- ScottMcC

1

是的，实际上我已经尝试过 {{ wtf.quick_form(form) }}。然而，我仍然无法让日期选择器小部件正常工作。感谢您的回复！ - jjjayn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dauros · Accepted Answer

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

因此，您需要在模板中包含此脚本（或编写自己的脚本）。在模板顶部添加此行，其中包含辅助宏：

{% 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()宏，并将相应的行复制到您的模板中，保留HTML标记。