python操作html5日期控件,Flask学习笔记-使用bootstrap-datepicker实现页面日期选择

Bootstrap时间日期插件推荐——bootstrap-datepicker

这个插件的样式个人觉得还是很不错，而且可以功能也是比较全的，多语言的支持也很全面，中文化很方便。

下面我就实例讲一下如果将这个插件加入到我们的Flask框架里(WTF)。

HTML页面的相关代码

在我们自己的基础模板(base.html)上加入如下代码：

{% block head %}

{{ super() }}

{% endblock %}

{% block scripts %}

{{ super() }}

{% endblock %}

主要是引用插件的js和css代码，其中.zh-CN.min.js是中文化的js

然后我们在日期输入框的页面里面加入该插件book_photo.html

{% block scripts %}

{{ super() }}

$('#date').datepicker({

weekStart: 1,

autoclose: true,

daysOfWeekHighlighted: "0,6",

format: "yyyy/mm/dd",

language: "zh-CN"

});

{% endblock %}

里面具体的参数可以参考该插件的文档。

这里推荐一个该插件的在线代码生成器地址：在线代码生成

里面的'#date'选择器是选择的form表单中的日期输入框，一般来说在WTF中就是你在后台代码中写的变量名，例如：

class BookForm(Form):

name = StringField('姓名', validators=[DataRequired()])

phone = StringField('电话', validators=[DataRequired()])

photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])

date = DateField('预约时间', default='', validators=[DataRequired()], format='%Y/%m/%d', widget=DatePickerWidget())

submit = SubmitField("预定")

里面的预约时间的变量为date所以通过

{{ wtf.quick_form(form) }}

生成出来的表单域的name就是date

Python代码

Form表单的定义在上面已经写出来了，下面看一下如何获取日期

booker = BookForm()

date=booker.date.data.strftime('%Y-%m-%d')

这个地方我也是弄了好久，需要注意获取日期域需要将data数据转换成字符串来接收“.strftime('日期格式')”

希望这边文章可以帮到大家，谢谢。