如何使用 Flask-WTF 表单实现日期选择器答案

【问题标题】：How to implement date picker using Flask-WTF forms如何使用 Flask-WTF 表单实现日期选择器
【发布时间】：2019-08-20 13:00:41
【问题描述】：

在使用 Flask-wtf 时应该如何实现日期选择器？

尝试使用网络上的各种示例，但似乎没有一个有效。

查看最新尝试的代码。

from flask import Flask, render_template, session, redirect, url_for, flash
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_wtf import FlaskForm, Form
from wtforms.fields.html5 import DateField
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired
from wtforms.fields import DateField
from flask_datepicker import datepicker

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'

bootstrap = Bootstrap(app)
moment = Moment(app)

class LoginForm(FlaskForm):
    entrydate = DateField('entrydate')
    submit = SubmitField('Submit')


@app.route('/date', methods=['GET', 'POST'])
def datep():
    form = LoginForm()
    if form.validate():
        return 'Form Successfully Submitted!'
    return render_template('date.html', form=form)

模板文件：

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

{% block title %}Flasky{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Hello, select date!</h1>
</div>
{{ wtf.quick_form(form) }}
{% endblock %}

预期：查看下拉日期选择器。

实际：不显示日期选择器。

【问题讨论】：

使用stackoverflow.com/questions/26057710/…接受的答案
另外，您还有两个名称为 DateField 的导入。选择一个或使用as 重命名
@AndrewAllen，感谢您的指点。我删除了第二个 datefield 导入，这已经解决了这个问题。现在有一个下拉日历。

标签： python-3.x flask-wtforms

【解决方案1】：

在 FlaskForm 中如下：

    #Import the resource from wtforms.fields.html5
    from wtforms.fields.html5 import DateField,DateTimeField 
   
    class LoginForm(FlaskForm):
    entrydate = DateField('entrydate', format='%Y-%m-%d' )
    submit = SubmitField('Submit')

您可以尝试将以下内容放入 html 中：

<div class="page-header">
    <h1>Hello, select date!</h1>
 {{form.entrydate (class= "datepicker")}}
</div>

HTML5 的其余部分是这样的：

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

{% block title %}Flasky{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Hello, select date!</h1>
    {{form.entrydate (class= "DateTimeField")}}

</div>
{{ wtf.quick_form(form) }}
{% endblock %}

【讨论】：