Flask & WTForms: виджет DatePicker для отображения даты

У меня есть небольшое приложение Flask, в котором есть три поля (Destination, Start Time и End Time). Я хотел бы использовать виджет DatePicker для отображения календаря при выборе даты начала и окончания.

С моими текущими сценариями виджет даты не появляется вообще. Что мне здесь не хватает?

app.py:

 # -*- coding: utf-8 -*- from flask.ext.wtf import Form from wtforms import SubmitField, SelectField, DateField from flask import Flask, render_template, request from flask.ext.bootstrap import Bootstrap from flask.ext.admin.form.widgets import DatePickerWidget class GeneralForm(Form): destination = SelectField(choices = data) start_time = DateField('Start at', widget=DatePickerWidget()) end_time = DateField('End at', widget=DatePickerWidget()) submit = SubmitField('Submit') @app.route("/", methods=['GET', 'POST']) def index(): form = GeneralForm(request.form) if request.method == 'POST': destination = form.destination.data start_time = form.start_time.data end_time = form.end_time.data return render_template('page.html', form=form) else: return render_template('index.html', form=form) bootstrap = Bootstrap(app) if __name__ == '__main__': app.run(debug=True) 

index.html:

 <link rel="stylesheet" href="{{url_for('.static', filename='mystyle.css')}}"> <link rel="stylesheet" href="{{url_for('.static', filename='datepicker.css')}}"> <link rel="javascript" href="{{url_for('.static', filename='main.js')}}"> <link rel="javascript" href="{{url_for('.static', filename='bootstrap-datepicker.js')}}" <form action="#" method="post"> {{ form.destination }} {{ form.start_time(class='datepicker') }} {{ form.end_time(class='datepicker') }} {{ form.submit }} </form> 

    DatePickerWidget() -Admin DatePickerWidget() основном добавляет DatePickerWidget() data-date-format="YYYY-MM-DD" data-role="datepicker" в поле ввода. После этого пользовательская функция JavaScript, расположенная в flask_admin/static/admin/js/form.js активирует виджет Bootstrap-Datepicker в этих полях.

    Поэтому вам нужно включить этот скрипт в свой шаблон (или написать свой собственный). Добавьте эту строку вверху вашего шаблона, который включает вспомогательный макрос:

     {% import 'admin/static.html' as admin_static with context %} 

    а затем вы можете включить form.js добавив эти строки в свой шаблон (для этого скрипта также требуется moment.js ):

     <script src="{{ admin_static.url(filename='vendor/moment.min.js') }}"></script> <script src="{{ admin_static.url(filename='admin/js/form.js') }}"></script> 

    Примечание. Вы также можете использовать файлы js и css Bootstrap-Datepicker, поставляемые с Flask-Admin. См. form_css() и form_js() в flask_admin/templates/bootstrap3/admin/lib.html и скопируйте соответствующие строки в свой шаблон.

    Вы объявили файл ссылки base.html базы данных flask-bootstrap в верхней части страницы?

     {% extends "bootstrap/base.html" as wtf %} 

    Затем вы можете инициировать свою форму на своей странице, просто добавив следующее

     {{ wtf.quick_form(form) }}