Как внедрить Bootstrap DatePicker (год / месяц) в фильтры администратора Django?

Question

Как включить встроенный селектор календаря начальной загрузки на страницу администрирования Django?

Я создавал пользовательскую форму и шаблон из следующего: Администратор Django добавляет пользовательский фильтр Работает с текстовым полем. Я хотел бы добавить календарь к этому.

1. Как включить файлы JS и CSS для этой конкретной формы?
2. Как передать выбранное значение в мою форму?

YearMonthForm

class YearMonthForm(forms.Form):
        def __init__(self, *args, **kwargs):
            self.field_name = kwargs.pop('field_name')
            super(YearMonthForm, self).__init__(*args, **kwargs)
            self.fields['%s__gte' % self.field_name] = forms.DateField()

YearMonthFilter

class YearMonthFilter(admin.filters.FieldListFilter):
    template = 'maindashboard/filter.html'

    def __init__(self, *args, **kwargs):
        field_path = kwargs['field_path']
        self.lookup_kwarg_since = '%s__gte' % field_path
        super(YearMonthFilter, self).__init__(*args, **kwargs)
        self.form = YearMonthForm(data=self.used_parameters, field_name=field_path)

    def expected_parameters(self):
        return [self.lookup_kwarg_since]

    # no predefined choices
    def choices(self, cl):
        return []

    def queryset(self, request, queryset):
        if self.form.is_valid():
            filter_params = {
                p: self.form.cleaned_data.get(p) for p in self.expected_parameters()
                if self.form.cleaned_data.get(p) is not None
            }

            startBillingDate = filter_params["billingDate__gte"]
            year = startBillingDate.year
            month = startBillingDate.month
            day = calendar.monthrange(startBillingDate.year, startBillingDate.month)[1]
            endDate = date(year, month, day)
            filter_params["billingDate__lte"] = endDate

            return queryset.filter(**filter_params)
        else:
            return queryset

filter.html

{% load i18n admin_static %}
<h3>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</h3>

{% with choices.0 as i %}

    <label>Filter by Year-Month:</label>
    <div id='InlineMenu'></div>

<form method="GET" action="">
    {{ spec.form.media }}
    {{ spec.form.as_p }}
    <p class="submit-row">
        {# create hidden inputs to preserve values from other filters and search field#}
        {% for k, v in i.get_query.items %}
                <input type="hidden" name="{{ k }}" value="{{ v }}">
        {% endfor %}
    <input type="submit" value="{% trans "Search" %}">
    <input type="reset" value="{% trans "Clear" %}">
    </p>
</form>

{% endwith %}

Я не уверен, что делают теги {{spec.form.media}}. Но я видел в других примерах, где они добавляют функцию мультимедиа к форме.

Структура папок Структура папки:

 -projectportal
     - maindashboard
     - templates
         - filter.html
     - static
         - maindashboard
             - css
                 - MonthPicker.min.css
             - js
                 - monthPicker.js
                 - monthPicker.min.js

Как сделать ссылки на файлы css и js для этой конкретной формы?

Обновление

Выяснил, как ссылаться на файлы JS и CSS для этой формы / шаблона. Однако теперь вся страница администрирования оформлена по-другому. Календарь теперь отображается под фильтрами администратора. Теперь мне нужно выяснить, как отловить события изменения даты и отправить форму.

@property
    def media(self):
        return forms.Media(
            css= {'all': ('maindashboard/css/bootstrap.min.css', 'maindashboard/css/bootstrap-theme.min.css', 'maindashboard/css/bootstrap-datepicker.min.css',)},
        js = ('maindashboard/js/jquery-3.3.1.slim.min.js', 'maindashboard/js/bootstrap.min.js', 'maindashboard/js/bootstrap-datepicker.js', 'maindashboard/js/bootstrap-datepicker.min.js', 'maindashboard/js/monthPicker.js'))

Answer 1

1. На файлы css и js ссылаются из метода media в классе YearMonthForm.

2. Год, выбранный месяц, передается после формы, представленной в файле monthPicker.js.

   $("#InlineMenu").datepicker().on("changeDate", function(e){
   // Increase month by 1
   $("#id_billingDate__gte").val(e.date.getFullYear() + "-" + (e.date.getMonth()+1) + "-1");
   $("#billing_calendar").submit();
   

   });