【Python】【Flask】【JQuery】如何将JQuery的DatePicker应用到Flask

【背景】

JQuery UI作为前端UI套件和Flask可以很好的融合，不过融合过程中也需要一些技巧。

【前端Static资源引入】

如果是外网的话直接写相应JS和CSS引用URL即可，但对于公司内部项目等来说，还是直接将资源文件引入到statics文件夹较好。
直接把JQuery UI的文件夹拷贝到Flask项目的Statics文件夹下：
在这里插入图片描述
在Templates的母模板下做如下引用（当然JQuery库的引入是前提，不再赘述）：

<link rel="stylesheet" type="text/css" href="{
     
     {url_for('static',filename='jqueryui/jquery-ui.css')}}">
<script src="{
     
     {url_for('static',filename='jqueryui/jquery-ui.js')}}" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

【后端Form实现】

这里还是拿日期选择做例子，后端造一个日期Field，最后和前端JQueryUI关联，实现日历选择并反映到后端。
Form定义如下：

class TSG_price_input_form(FlaskForm):
    Target_date = DateField("选择数据日期", validators=[DataRequired()], format='%Y-%m-%d')
    submit = SubmitField("追加")

【模板关联Form】

最终前端的Flask模板要关联后端的日期Form：
模板中插入JS：

    <script type="text/javascript">
        $(function(){
    
    
            $("#TargetDate").datepicker({
    
    
             format:"yyyy/mm/dd"
            });
        });
    </script>

其中TargetDate就是前端中引用Form的元素的ID，具体实现如下：

                    <div class="form-group">
                        {
   
   {form.Target_date.label(class="form-control-label")}}
                        {%if form.Target_date.errors%}
                            {
   
   {form.Target_date(class="form-control form-control-lg is-invalid")}}
                            <div class="invalid-feedback">
                                {%for error in form.Target_date.errors%}
                                    <SPAN>{
   
   {error}}</SPAN>
                                {%endfor%}
                            </div>
                        {%else%}
                            {
   
   {form.Target_date(id='TargetDate')}}
                        {%endif%}
                    </div>

else之前的部分都是用来处理Error的，重要的在else之后，通过给Target_date赋予ID属性来关联JQueryUI。

【逻辑传值】

前面代码里的Form外面有双层大括号，代表是从Flask的后端的视图函数传给模板的Form对象。