Flask学习笔记-使用bootstrap-datepicker实现页面日期选择顶

bdcn

发布于 2018-09-12 14:48:16

4.4K0

发布于 2018-09-12 14:48:16

文章被收录于专栏：bdcn

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('日期格式')”

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/04/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度