如何在自定义表单字段上激活 datepicker 小部件？答案

【问题标题】：How do I activate datepicker widget on custom form field?如何在自定义表单字段上激活 datepicker 小部件？
【发布时间】：2016-05-26 12:01:37
【问题描述】：

例如，当我添加自定义 ModelView 时：

class TaskModelView(ModelView):
    pass


flaskadmin = Admin(name='Flasky', template_mode='bootstrap3', index_view=MyAdminIndexView(),
                   base_template='admin/mymaster.html')

flaskadmin.add_views(TaskModelView(models.Task, db.session))

我还在适当的 DateTime 字段上获得有用的 datepicker 小部件：

但是自定义视图和表单呢？我尝试以相同的方式添加视图，但从 BaseView 继承了它，然后我使用来自 flask-admin 的 DateTimeField 创建了新表单并尝试渲染它：

from flask.ext.admin.form import DateTimeField, DatePickerWidget, DateTimePickerWidget


class AssebledChartForm(Form):
    date_from = DateTimeField('From', format='%d.%m.%Y', widget=DateTimePickerWidget())
    date_to = DateTimeField('To')


class AnalyticsView(BaseView):
<...>
    return self.render('admin/analytic.html', form=form)

flaskadmin.add_view(AnalyticsView(name='Analytics', endpoint='analytics'))

但小部件并未同时出现在 from 和 to 字段中：

如何在我自己的表单上使用 flask-admin datepicker？

【问题讨论】：

标签： python flask datepicker flask-admin

【解决方案1】：

你必须像这样import DateTimePickerWidget：

from flask_admin.form import DateTimePickerWidget

并使用它，例如，像这样：

start = DateTimeField('Start', widget=DateTimePickerWidget())

【讨论】：

【解决方案2】：

据我所知，您可以为此使用 jQuery datepicker，也可以使用 WTForms，而不是 flask.ext.admin.form。

管理表单旨在对最终用户隐藏，并且强烈禁止将其 API 暴露给公共用户。

有一个类似的问题here

你可以看到一个关于如何使用 WTForms DatePicker 的好例子。

【讨论】：

admin.form 只是提供了一些用于创建管理界面的字段，DateTimeField 就是其中之一。它也继承自 WTForms DateTimeField 以使用 Flask-admin DataTimeWidget。我正在寻找的是如何让它发挥作用。

【解决方案3】：

您的 admin/analytic.html 未加载处理客户端日期选择的 javascript。将以下内容添加到您的模板中；

{% block tail_js %}
     <script src="/static/vendor/jquery.min.js" type="text/javascript">/script>
     {# use /static/bootstrap2/js/bootstrap.min.js if you are using bootstrap2 #}
     <script src="/static/bootstrap3/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="/static/vendor/moment.min.js" type="text/javascript"></script>
     <script src="/static/vendor/select2/select2.min.js" type="text/javascript"></script>
{% endblock %}

这应该为您提供使所有小部件（Select2、DatePicker 等）工作所需的一切。

【讨论】：