Django - 向 AdminTimeWidget 添加更多选项

Question

我尝试通过覆盖

AdminTimeWidget

来向

DateTimeShortcuts

添加更多时间选择，参考这篇文章还有SO上的另一个类似帖子。我的问题是我在控制台上收到

Uncaught ReferenceError: DateTimeShortcuts is not defined

和

jQuery.Deferred exception: DateTimeShortcuts is not defined ReferenceError: DateTimeShortcuts is not defined at HTMLDocument

错误。我是 django 的新手，我不明白为什么会收到此错误。这是我的实现方式：

(function($) {
    $(document).ready(function() {
        DateTimeShortcuts.clockHours.default_ = [
            ['16:30', 16.5],
            ['17:30', 17.5],
            ['18:00', 18],
            ['19:00', 19],
            ['20:00', 20],
        ];

        DateTimeShortcuts.handleClockQuicklink = function (num, val) {
            let d;
            if (val == -1) {
                d = DateTimeShortcuts.now();
            } else {
                const h = val | 0;
                const m = (val - h) * 60;
                d = new Date(1970, 1, 1, h, m, 0, 0);
            }
            DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
            DateTimeShortcuts.clockInputs[num].focus();
            DateTimeShortcuts.dismissClock(num);
        };
    });
})(jQuery);

在我的 ModelAdmin 中，我将此 JS 文件包含在 Media 类中，如下所示：

@admin.register(models.MyModel)
class MyAdminModel():
   // other stuff
   list_filter = [("created", custom_titled_datetime_range_filter("By created"))]

   class Media:
        js = ("admin/js/DateTimeShortcuts.js",)

我还有一个自定义日期时间范围过滤器，实现为：

def custom_titled_datetime_range_filter(title):
    class CustomDateTimeRangeFilter(DateTimeRangeFilter):
        def __init__(self, field, request, params, model, model_admin, field_path):
            super().__init__(field, request, params, model, model_admin, field_path)
            self.title = title

    return CustomDateTimeRangeFilter

Answer 1

查看 DateTimeShortcuts 的源代码后，我必须在模型管理中将

calendar.js

和

DateTimeShortcuts.js

包含为

Media

。以下是我扩展选项的方法：

(function($) {
    $(document).ready(function () {
        // push your custom options to `_default`
        DateTimeShortcuts.clockHours.default_.push([gettext_noop('3:30 p.m.'), 15.5]);

        DateTimeShortcuts.handleClockQuicklink = function (num, val) {
            let d;
            if (val == -1) {
                d = DateTimeShortcuts.now();
            } else {
                const h = val | 0;
                const m = (val - h) * 60;
                d = new Date(1970, 1, 1, h, m, 0, 0);
            }
            DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
            DateTimeShortcuts.clockInputs[num].focus();
            DateTimeShortcuts.dismissClock(num);
        };
    });
})(django.jQuery);

并在模型管理中包含这些文件：

@admin.register(models.MyModel)
class MyAdminModel():

   class Media:
        js = (
            "admin/js/calendar.js",
            "admin/js/admin/DateTimeShortcuts.js",
            "admin/js/time-shortcuts.js",
        )

现在所有依赖文件将按顺序加载，并且

time-shortcuts.js

将覆盖选项。