Flask＆WTForms：DatePicker Widget顯示日期

我有一個小Flask應用程序，它有三個字段（目標，開始時間和結束時間）。我想在選擇開始日期和結束日期時使用DatePicker小部件來顯示日曆。Flask＆WTForms：DatePicker Widget顯示日期

使用我當前的腳本，日期小部件根本不會產生。我在這裏錯過了什麼？

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>

來源

2015-10-06 jjjayn

你有沒有宣佈在頁面頂部的燒瓶引導base.html文件引用的文件？

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

然後，您可以通過以下

{{ wtf.quick_form(form) }}

來源

2015-10-07 08:53:44 ScottMcC

是的，實際上我試過{{wtf.quick_form（form）}}。不過，我仍然無法使datepicker窗口小部件工作。感謝您的答覆！ – jjjayn

簡單地增加燒瓶聯繫的DatePickerWidget()基本上增加了data-date-format="YYYY-MM-DD" data-role="datepicker"屬性輸入字段開始你的形式在頁面中。之後，位於flask_admin/static/admin/js/form.js的自定義JavaScript函數將激活這些字段上的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>

注意：您還可以使用隨Flask-Admin附帶的Bootstrap-Datepicker js和css文件。請參閱flask_admin/templates/bootstrap3/admin/lib.html中的form_css()和form_js()宏，並將相應的行復制到您的模板中。

來源

2015-10-15 20:23:38 Dauros

該應用程序無法找到模板admin/static.html。導入行引發TemplateNotFound錯誤。 – user3527975

Infact我已經從github.com/flask-admin/flask-admin/tree/master/flask_admin/static/admin/添加了form.js和moment.js。小部件仍然不會產生。 – user3527975

Flask＆WTForms：DatePicker Widget顯示日期

回答

相關問題