如何实现 Bootstrap DatePicker (Year/Month) 到 Django 管理过滤器?
How to implement Bootstrap DatePicker (Year/Month) to Django Admin Filters?
如何将内联 bootstrap 日历选择器包含到 Django 管理页面中?
我正在使用以下内容创建自定义表单和模板:
它适用于文本字段。我想将日历添加到此。
- 如何为这个特定表单包含 JS 和 CSS 文件?
- 如何将选定的值传递到我的表单?
年月表
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()
年月过滤器
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 文件?
更新
弄清楚如何为此 form/template 引用 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'))
- css和js文件是从YearMonthFormclass中的media方法中引用的。
在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();
});
如何将内联 bootstrap 日历选择器包含到 Django 管理页面中?
我正在使用以下内容创建自定义表单和模板:
- 如何为这个特定表单包含 JS 和 CSS 文件?
- 如何将选定的值传递到我的表单?
年月表
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()
年月过滤器
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 文件?
更新
弄清楚如何为此 form/template 引用 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'))
- css和js文件是从YearMonthFormclass中的media方法中引用的。
在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();
});