How do I activate datepicker widget on custom form field?

Question

For example, when I add custom 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))

I also get useful datepicker widget on appropriate DateTime fields:

But what about custom views and forms? I tried to add view same way, but inherited it from BaseView, then I created new form with DateTimeField from flask-admin and tried to render it:

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'))

but widget did not appear both on from and to fields:

How do I use flask-admin datepicker on my own forms?

Andrea94 · Answer 1 · 2020-01-30T18:18:53.997

2

You have to import DateTimePickerWidget like this:

from flask_admin.form import DateTimePickerWidget

and use it, for example, like this:

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

edited Jan 30 '20 at 18:18

answered Jan 30 '20 at 17:59

Andrea94

21
4

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

As far as I remember, you can use either jQuery datepicker for this, or WTForms one, and not a flask.ext.admin.form.

Admin form is intended to be hidden from the end user, and exposing its API to the public user is strongly prohibited.

There was a similar question here

And you can see a good example on how to use WTForms DatePicker.

edited May 23 '17 at 12:15

Community

1
1

answered May 26 '16 at 12:13

mutantkeyboard

1,614
1
16
44

1

admin.form just provides a number of fields to use to create admin interface, and DateTimeField is one of them. It is also inherited from WTForms DateTimeField to use Flask-admin DataTimeWidget. What i'm looking for is how to get it work. – aryndin May 26 '16 at 12:20

score 0 · Answer 3 · answered Aug 23 '16 at 18:49

Your admin/analytic.html is not loading the javascript that handles the client side selection of dates. add the following to your template;

{% 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 %}

This should give you everything you need to make all the widgets work (Select2, DatePicker, etc).

How do I activate datepicker widget on custom form field?

3 Answers3