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

Question

例如，当我添加自定义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？

Answer 1

您必须这样import DateTimePickerWidget：

from flask_admin.form import DateTimePickerWidget

并使用它，例如：

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

Answer 2

据我记忆，你可以使用jQuery datepicker，或WTForms one，而不是flask.ext.admin.form。

管理员表单旨在向最终用户隐藏，并强烈禁止向公共用户公开其API。

有一个类似的问题here

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

Answer 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等）。