Flask学习笔记-使用bootstrap-datepicker实现页面日期选择
Bootstrap时间日期插件推荐——bootstrap-datepicker
参考网站：http://www.58img.com/framework/813
这个插件的样式个人觉得还是很不错，而且可以功能也是比较全的，多语言的支持也很全面，中文化很方便。
下面我就实例讲一下如果将这个插件加入到我们的Flask框架里（WTF）。
HTML页面的相关代码
在我们自己的基础模板（base.html）上加入如下代码：
{% block head %}
{{ super() }}
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
{% endblock %}
主要是引用插件的js和css代码，其中.zh-CN.min.js是中文化的js
然后我们在日期输入框的页面里面加入该插件book_photo.html
{% block scripts %}
{{ super() }}
<script type="text/javascript">
$('#date').datepicker({
weekStart: 1,
autoclose: true,
daysOfWeekHighlighted: "0,6",
format: "yyyy/mm/dd",
language: "zh-CN"
});
</script>
{% 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('日期格式')”
希望这边文章可以帮到大家，谢谢。