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

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

如果是外网的话直接写相应JS和CSS引用URL即可，但对于公司内部项目等来说，还是直接将资源文件引入到statics文件夹较好。
直接把JQuery UI的文件夹拷贝到Flask项目的Statics文件夹下：

在Templates的母模板下做如下引用（当然JQuery库的引入是前提，不再赘述）：

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

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

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

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

                    

                        {{form.Target_date.label()}}
                        {%if form.Target_date.errors%}
                            {{form.Target_date()}}
                            

                                {%for error in form.Target_date.errors%}
                                    {{error}}
                                {%endfor%}
                            
                        {%else%}
                            {{form.Target_date(id='TargetDate')}}
                        {%endif%}
                    

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

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