Login

Filter change list by a date range

Author:
aruseni
Posted:
February 5, 2012
Language:
HTML/template
Version:
1.3
Tags:
javascript date jquery html change_list change-list date-range
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. Date Picker Template Include by brandonh 6 years, 4 months ago
  2. Pagination/Filtering Alphabetically by zain 6 years ago
  3. Add delete buttons to admin changelist by kylefox 7 years, 10 months ago
  4. Past days template filter by ramen 5 years, 4 months ago
  5. HTML/JS template filter to show localized dates/times by mback2k 5 years, 11 months 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.