Grocery Bag using Django (Part-5) - Filter Items by Date
Tags: webdev, python, django
Published: 2021-12-01 04:30:35

---
title: Grocery Bag using Django (Part-5) - Filter Items by Date
published: true
series: Grocery Bag Application Using Django
date: 2021-11-30 13:55:44 UTC
tags: webdev, Python, Django
canonical_url: http://iread.ga/posts/73/grocery-bag-using-django-part-5-filter-items-by-date
---

# **Introduction**

In the previous post, we had completed CRUD operations in our web application. If you haven't read it till now, make sure you read it [here](https://iread.ga/posts/72/grocery-bag-using-django-part-4-crud-operations). This will be a short blog where we will be filtering the items on the index page according to the dates they were created on.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou0krhmktf3y31fkqrjt.png)
 

# **Filter by date**

On the index page, you'll find an option to filter the items by the date they were created on. What we are going to do is to create an HTML form that makes a GET request on the index route whenever it is submitted. On the backend, if we get the date field, we filter the items by the date. If the date field is not there, we simply don't apply any filter except `user=request.user`. Open the bag/views.py file and update the index view function as:

```py
@login_required
def index(request):
    date = request.GET.get('date')
    if date:
        items = Item.objects.filter(user=request.user, date=date).order_by('-id')
    else:
        items = Item.objects.filter(user=request.user).order_by('-id')
    context = {
        'items': items
    }
    return render(request, "index.html", context)
```

As discussed above, if we get the value of the `date`, we filter the items according to the date too. If not, we don't filter it.

We are also required to update the `index.html` file as:

```html
{% extends "base.html" %}{% load static %} 

{% block title %}View Bag{% endblock title %} 

{% block content %}
<body>
  <div class="container mt-5">
    <!-- top -->
    <div class="row">
      <div class="col-lg-6">
        <h1>View Grocery List</h1>
        <a href="{% url 'add-item' %}">
          <button type="button" class="btn btn-success">Add Item</button>
        </a>
      </div>
      <div class="col-lg-6 float-right">
        <form action="{% url 'index' %}" method="get">
          <div class="row">
            <div class="col-lg-6">
              <!-- Date Filtering-->
              <input type="date" name="date" class="form-control" />
            </div>
            <div class="col-lg-4">
              <input type="submit" class="btn btn-danger" value="filter" />
            </div>
            <div class="col-lg-2">
              <p class="mt-1"><a href="{% url 'signout' %}">Log Out</a></p>
            </div>
          </div>
        </form>
      </div>
    </div>
    <br>
    {% include 'partials/alerts.html' %}
    <!-- Grocery Cards -->
    <div class="row mt-4">
      <!-- Loop This -->
      {% for item in items %}
      <div class="col-lg-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{item.name}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{item.quantity}}</h6>
            {% if item.status == 'PENDING' %}
            <p class="text-info">{{item.status}}</p>
            {% elif item.status == 'BOUGHT' %}
            <p class="text-success">{{item.status}}</p>
            {% else %}
            <p class="text-danger">{{item.status}}</p>
            {% endif %}
            <div class="row">
              <div class="col-md-6">
                <a href="{% url 'update-item' item.id %}">
                  <button type="button" class="btn btn-primary">UPDATE</button>
                </a>
              </div>
              <div class="col-md-6">
                <a href="{% url 'delete-item' item.id %}">
                  <button type="button" class="btn btn-danger">DELETE</button>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</body>
{% endblock content %}

```

As discussed above, we created an HTML form around the date filter with a GET request on the index route. And that's it, we're done!!  
 

# **Demo Video**

You can watch the demo video here:

{% vimeo 651566031 %} 
 

# **Conclusion**

This was a short and simple blog on how we can filter the items on the index page according to the dates they were created on. In the next blog(the final one), we'll deploy this app on Heroku, a free hosting platform. Stay tuned!

Code till now: [https://github.com/ashutoshkrris/Grocery-Bag/tree/blog5](https://github.com/ashutoshkrris/Grocery-Bag/tree/blog5)