Support for django-admin-rangefilter (feature)

[ghost]

this package(https://github.com/silentsokolov/django-admin-rangefilter) enable the admin filter to use the calendar select range and widely uses. When i try to use this package with jazzmin the layout got pretty messed up

jazzmin:

default django admin:

Would love to have jazzmin support this package or built in base jazzmin :)

[hwalinga]

Related: #193

In fact, it is pretty much identical. Just another third party app, but otherwise pretty much the same.

[ramlok1]

the filter is not working when i use this range filter plugin, any tip to get it work?

[mudsut4ke]

@linhnvhicts , I've found that the main search button doesn't work when applying that filter to django-jazzmin Did you encounter a similar problem?

[javivdm]

Is there any ETA for this?

[kebrick]

Hi! Check Search does not occur after pressing the "search" button #64

[linhnvhicts]

hello, after a while i needed this and decided to wrote it myself a custom filter by using this https://www.daterangepicker.com/ and it worked well with jazzmin. Change the created_at to any field that in your model

filters.py:

import datetime

class CreatedAtFilter(admin.SimpleListFilter):
    title = 'created at'
    parameter_name = 'created_at'
    template = 'admin/input_filter.html'

    def lookups(self, request, model_admin):
        return [(0, 0),]

    def queryset(self, request, queryset):
        if self.value():
            created_at_date = self.value().split(' - ')
            created_at_start = datetime.datetime.strptime(created_at_date[0], "%m/%d/%Y")
            created_at_end = datetime.datetime.strptime(created_at_date[1], "%m/%d/%Y") + datetime.timedelta(days=1)
            return queryset.filter(your_field__range=[created_at_start, created_at_end])
        return queryset

and here is the templates/admin/input_filter:

{% load i18n %}

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="form-group">
	<input type="text" name="{{ field_name }}">
</div>

<script>
	const queryString = window.location.search;
	const urlParams = new URLSearchParams(queryString);
	const createdAt = urlParams.get('created_at');

	let defaultDatePickerConfig = {
		autoUpdateInput: false,
		locale: {
			cancelLabel: 'Clear'
		}
	}

	if (createdAt) {
		const created_at_date = createdAt.split(' - ');
		const created_at_start = new Date(created_at_date[0]);
		const created_at_end = new Date(created_at_date[1]);
		defaultDatePickerConfig = {
			startDate: created_at_start,
			endDate: created_at_end,
			locale: {
				cancelLabel: 'Clear'
			}
		}
	}

	$('input[name="{{ field_name }}"]').daterangepicker(defaultDatePickerConfig);

	$('input[name="{{ field_name }}"]').on('apply.daterangepicker', function (ev, picker) {
		$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
	});

	$('input[name="{{ field_name }}"]').on('cancel.daterangepicker', function (ev, picker) {
		$(this).val('');
	});

</script>