Login

Filter change list by a date range

Author:
aruseni
Posted:
February 5, 2012
Language:
HTML/template
Version:
1.3
Score:
1 (after 1 ratings)

The Django admin site has a feature to filter objects in change list by parameters supplied in the query string. Particularly, parameters such as date__gte and date__lte can be used.

This example is for filtering objects in change list by a date range (the date field is called expiration_date, but you can, of course, use any other name).

As the server side (Django) already supports such filtering, all you need to do is to edit this for your needs (you can also add some DRY if you want) and put it into templates/admin/app_name/model_name/change_list.html.

Some CSS for better layout:

div.date_filter select#from_month, div.date_filter select#to_month {
    margin-left: 0;
}

div.date_filter label {
    margin-right: 5px;
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{% extends "admin/change_list.html" %}
{% block filters %}
{{ block.super }}
    <div class="actions date_filter">
        <form action="{% url admin:[appname]_[modelname]_changelist %}" method="get">
            <div>
            <strong>Фильтровать по дате:</strong>
            <label for="from_day"><strong>от</strong></label>
            <input type="text" size="2" maxlength="2" name="from_day" id="from_day"/>
            <select name="from_month" id="from_month">
              <option value="01">января</option>
              <option value="02">февраля</option>
              <option value="03">марта</option>
              <option value="04">апреля</option>
              <option value="05">мая</option>
              <option value="06">июня</option>
              <option value="07">июля</option>
              <option value="08">августа</option>
              <option value="09">сентября</option>
              <option value="10">октября</option>
              <option value="11">ноября</option>
              <option value="12">декабря</option>
            </select>
            <input type="text" size="4" maxlength="4" name="from_year" id="from_year" value="{% now "Y" %}"/>
            <label for="to_day"><strong>до</strong></label>
            <input type="text" size="2" maxlength="2" name="to_day" id="to_day"/>
            <select name="to_month" id="to_month">
              <option value="01">января</option>
              <option value="02">февраля</option>
              <option value="03">марта</option>
              <option value="04">апреля</option>
              <option value="05">мая</option>
              <option value="06">июня</option>
              <option value="07">июля</option>
              <option value="08">августа</option>
              <option value="09">сентября</option>
              <option value="10">октября</option>
              <option value="11">ноября</option>
              <option value="12">декабря</option>
            </select>
            <input type="text" size="4" maxlength="4" name="to_year" id="to_year" value="{% now "Y" %}"/>
            <input type="submit" class="button" value="Применить"/>
            </div>
        </form>
        <script type="text/javascript">
            function getParameterByName(name)
            {
              name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.href);
              if(results == null)
                return "";
              else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
            }
            django.jQuery("div.date_filter select").val("{% now "m" %}");
            expiration_date_from = getParameterByName("expiration_date__gte");
            if (expiration_date_from != "") {
                expiration_date_form_array = expiration_date_from.split('-');
                django.jQuery("#from_day").val(expiration_date_form_array[2]);
                django.jQuery("#from_month").val(expiration_date_form_array[1]);
                django.jQuery("#from_year").val(expiration_date_form_array[0]);
            }
            expiration_date_to = getParameterByName("expiration_date__lte");
            if (expiration_date_to != "") {
                expiration_date_to_array = expiration_date_to.split('-');
                django.jQuery("#to_day").val(expiration_date_to_array[2]);
                django.jQuery("#to_month").val(expiration_date_to_array[1]);
                django.jQuery("#to_year").val(expiration_date_to_array[0]);
            }
            django.jQuery("div.date_filter form").submit(function(event) {
                event.preventDefault();
                window.location = "{% url admin:[appname]_[modelname]_changelist %}?expiration_date__gte="+django.jQuery('#from_year').val()+'-'+django.jQuery('#from_month').val()+'-'+django.jQuery('#from_day').val()+'&expiration_date__lte='+django.jQuery('#to_year').val()+'-'+django.jQuery('#to_month').val()+'-'+django.jQuery('#to_day').val();
            });
        </script>
    </div>
{% endblock %}

More like this

  1. Bootstrap Accordian by Netplay4 5 years, 10 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
  4. Reusable form template with generic view by roldandvg 8 years, 11 months ago
  5. Pagination Django with Boostrap by guilegarcia 9 years, 1 month ago

Comments

grillermo (on February 6, 2012):

English translation would be nice.

#

aruseni (on March 6, 2012):
<strong>Filter by date:</strong>

<label for="from_day"><strong>from</strong></label>

<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>

<label for="to_day"><strong>to</strong></label>

<input type="submit" class="button" value="Apply"/>

#

Please login first before commenting.