Jinja与WTF form使用日期时间组件的解决方法
原创Jinja与WTF form使用日期时间组件的解决方法
原创
华科云商小徐
发布于 2025-01-06 10:50:13
发布于 2025-01-06 10:50:13
代码可运行
运行总次数：0
代码可运行
在使用 Flask 与其模板引擎 Jinja2 结合 WTF forms（Flask-WTF）时，集成日期时间选择组件可以提高表单的用户体验。下面是一种方法来实现日期和时间选择功能：
1、问题背景
在使用 Jinja 和 WTF form 来创建表单时，遇到一个问题：希望在表单中添加日期时间组件，但使用 form.validate_on_submit() 时总是返回 False。 以下是表单代码：
class FoodForm(Form):
food_name = StringField('Food Name', validators=[Required()])
food_description = StringField('Food Description', validators=[Required()])
price = FloatField('Price', validators=[Required()])
event_starts = DateTimeField('Event Starts', validators=[Required()])
event_ends = DateTimeField('Event Ends', validators=[Required()])
food_types = ['Indian', 'American', 'Chinese', 'Italian', 'Other', 'French',
'Deli','Mediterranean', 'Japanese']
food_choices = [(i+1, food_type) for i, food_type in enumerate(sorted(food_types))]
cuisine_type = SelectField('Cuisine Type', choices=food_choices, validators=[Required()])
submit = SubmitField('Submit')Jinja 模板代码如下：
<form class="form form-horizontal" role="form" method="POST">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-md-6">{{ form.food_name.label }} </div>
<div class="col-md-6">{{ form.food_name() }} {% for error in form.food_name.errors %} <div class="flash">{{ message }} </div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.food_description.label }} </div>
<div class="col-md-6">{{ form.food_description() }} {% for error in form.food_description.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.event_starts.label }} </div>
<div class="col-md-6"><input id="event_starts" type="datetime-local" value="2014-10-31T00:00:01"> {% for error in form.event_starts.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.event_ends.label }} </div>
<div class="col-md-6"><input id="event_ends" type="datetime-local" value="2014-10-31T00:00:01"> {% for error in form.event_ends.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.price.label }} </div>
<div class="col-md-6">{{ form.price() }} {% for error in form.price.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.cuisine_type.label }} </div>
<div class="col-sm-2 control-label" for="formGroupInputLarge">{{ form.cuisine_type() }} {% for error in form.cuisine_type.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message | safe }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<button type="submit" class="btn btn-primary btn-lg" value="submit">Submit</button>
</form>2、解决方案
为了解决这个问题，需要在 DateTimeField 中使用 format 参数来指定日期时间的格式。 修改后的表单代码如下：
class FoodForm(Form):
food_name = StringField('Food Name', validators=[Required()])
food_description = StringField('Food Description', validators=[Required()])
price = FloatField('Price', validators=[Required()])
event_starts = DateTimeField('Event Starts', format ='%Y-%m-%dT%H:%M:%S', validators=[Required()])
event_ends = DateTimeField('Event Ends', format ='%Y-%m-%dT%H:%M:%S',validators=[Required()])
food_types = ['Indian', 'American', 'Chinese', 'Italian', 'Other', 'French',
'Deli','Mediterranean', 'Japanese']
food_choices = [(i+1, food_type) for i, food_type in enumerate(sorted(food_types))]
cuisine_type = SelectField('Cuisine Type', choices=food_choices, validators=[Required()])
submit = SubmitField('Submit')修改后的 Jinja 模板代码如下：
<form class="form form-horizontal" role="form" method="POST">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-md-6">{{ form.food_name.label }} </div>
<div class="col-md-6">{{ form.food_name() }} {% for error in form.food_name.errors %} <div class="flash">{{ message }} </div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.food_description.label }} </div>
<div class="col-md-6">{{ form.food_description() }} {% for error in form.food_description.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.event_starts.label }} </div>
<div class="col-md-6">{{ form.event_starts(type="datetime-local") }} {% for error in form.event_starts.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.event_ends.label }} </div>
<div class="col-md-6">{{ form.event_ends(type="datetime-local") }} {% for error in form.event_ends.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.price.label }} </div>
<div class="col-md-6">{{ form.price() }} {% for error in form.price.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
<div class="row">
<div class="col-md-6">{{ form.cuisine_type.label }} </div>
<div class="col-sm-2 control-label" for="formGroupInputLarge">{{ form.cuisine_type() }} {% for error in form.cuisine_type.errors %} <div class="flash">{{ message }}</div>{% endfor %}</div>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message | safe }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<button type="submit" class="btn btn-primary btn-lg" value="submit">Submit</button>
</form>现在，就可以正常使用 form.validate_on_submit() 来验证表单了。
通过这些步骤，我们可以在 Flask 应用中有效地使用日期和时间组件，提高表单的可用性和功能性。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
