You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flask-Admin Bootstrap4模式下X-editable日期可编辑字段报错问题

Flask-Admin Bootstrap4模式X-editable日期字段报错问题

该问题仅在Bootstrap 4模式下出现,代码中配置template_mode='bootstrap3'时运行完全正常,将参数修改为template_mode='bootstrap4'后就会触发报错。

复现代码

import os
import datetime

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
import flask_admin as admin
from flask_admin.contrib.sqla import ModelView


# Create application
app = Flask(__name__)

# Create dummy secrey key so we can use sessions
app.config['SECRET_KEY'] = '123456789'

# Create in-memory database
app.config['DATABASE_FILE'] = 'sample_db.sqlite'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + app.config['DATABASE_FILE']
app.config['SQLALCHEMY_ECHO'] = True
db = SQLAlchemy(app)

# Instantiate the admin class with Bootstrap mode
# admin = admin.Admin(app, 'Example', template_mode='bootstrap3')
admin = admin.Admin(app, 'Example', template_mode='bootstrap4')


# Models
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.Unicode(64))
    email = db.Column(db.Unicode(64))
    date_added = db.Column(db.Date)

    def __unicode__(self):
        return self.name


class UserAdmin(ModelView):
    column_searchable_list = ('name', 'email')
    column_editable_list = ('name', 'email', 'date_added')
    column_display_pk = True

    can_set_page_size = True
    # the number of entries to display in the list view
    page_size = 5


# Add Flask-Admin views
admin.add_view(UserAdmin(User, db.session))

# Flask normal views
@app.route('/')
def index():
    return '<a href="/admin/">Click me to get to Admin!</a>'


def build_sample_db():
    """Populate a small db with some example entries"""

    db.drop_all()
    db.create_all()

    first_names = [
        'Harry', 'Amelia', 'Oliver', 'Jack', 'Isabella', 'Charlie','Sophie', 'Mia',
    ]
    last_names = [
        'Brown', 'Smith', 'Patel', 'Jones', 'Williams', 'Johnson', 'Taylor', 'Thomas',
    ]

    for i in range(len(first_names)):
        user = User()
        user.name = first_names[i] + " " + last_names[i]
        user.email = first_names[i].lower() + "@example.com"
        user.date_added = datetime.date.today()
        db.session.add(user)

    db.session.commit()
    return


# Build a sample db on the fly, if one does not exist yet.
app_dir = os.path.realpath(os.path.dirname(__file__))
database_path = os.path.join(app_dir, app.config['DATABASE_FILE'])
os.remove(database_path)
if not os.path.exists(database_path):
    build_sample_db()


if __name__ == '__main__':
    # Start app
    app.run(debug=True, host='0.0.0.0')

问题现象截图

  • Bootstrap4模式下点击日期字段前的页面状态
    报错前页面
  • 点击可编辑日期字段后的控制台报错信息
    控制台报错信息
  • Bootstrap3模式下的正常预期效果
    Bootstrap3下正常效果

内容的提问来源于stack exchange,提问作者Sean McCarthy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 01:36:01