【Flask】使用Flask-Admin内建的JS控件获取日期和时间

概述

在使用Flask-Admin开发后台Web应用时，有时候需要一个填写日期或时间的表单，最好的用户体验就是用JS控件选择日期或时间。由于博主本身不是专门做前端的，所以能用Flask-Admin的东西我都尽量使用。

效果图

一图胜千言，首先上效果图。

目录结构和代码清单

目录结构

下面简单介绍这个Demo的目录结构

• static
• templates
  
  • index.html
  • my_base.html
• run.py

run.py是放置Flask最小程序的代码，templates/index.html是主页，其他的暂时预留。

run.py

from flask import Flaskfrom flask_admin import Admin, AdminIndexViewapp = Flask(__name__)admin = Admin(app=app,              #base_template='my_base.html',              index_view=AdminIndexView(template='index.html')              )if __name__ == '__main__':    app.run()

初始化Flask应用和Flask-Admin

templates/index.html

{% extends 'admin/master.html' %}{# 添加下面语句 #}{% import 'admin/lib.html' as lib with context %}{% block head %}    {{ super() }}    <!--{{ lib.form_css() }}-->    <link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='3.5.2') }}" rel="stylesheet">    <link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css', v='1.3.22') }}" rel="stylesheet">{% endblock %}{# 添加结束 #}{# body #}{% block body %}    <h4>使用Flask-Admin内建的JS控件获取日期和时间</h4>    <div>        <h5>选择日期</h5>        <input data-date-format="YYYY-MM-DD" data-role="datepicker" id="datepicker" name="date" type="text" value="" class="">    </div>    <div>        <h5>选择时间</h5>        <input data-date-format="HH:mm:ss" data-role="timepicker" id="timepicker" name="timepicker" type="text" value="" class="">    </div>{% endblock %}{# 添加下面语句 #}{% block tail %}    {{ super() }}    <!--{{ lib.form_js() }}-->    <script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>    <script src="{{ admin_static.url(filename='admin/js/form.js', v='1.0.1') }}"></script>{% endblock %}{# 添加结束 #}

最关键的代码已经用注释标注了，最主要的是添加select2.css、daterangepicker-bs2.css、daterangepicker.js、form.js这些文件，如果想省事也可以直接调用{{ lib.form_css() }}、{{ lib.form_js() }}即可，当然这样做的话前面还要导入lib文件。

其他

想使用更多的控件的话，可以查看daterangepicker的官网。或者到Flask-Admin安装目录下static\vendor\bootstrap-daterangepicker路径，找README.md文件查看。

补充

最后补充两个JS控件的调用示例：

    <div>        <h5>选择日期和时间</h5>        <input data-date-format="YYYY-MM-DD HH:mm:ss" data-role="datetimepicker" type="text" >    </div>    <div>        <h5>选择日期时间范围</h5>        <input data-date-format="YYYY-MM-DD" data-role="daterangepicker" type="text">    </div>