Add date range filtering to exams with jQuery UI datepicker support

generic/templates/generic/partials/filter_bar.html

@@ -162,4 +162,24 @@
         .btn-outline-secondary { color: #e6eef6; border-color: rgba(255,255,255,0.06); }
         .btn-light { background: #111827; color: #e6eef6; border-color: rgba(255,255,255,0.04); }
         .filter-card label { color: #e6eef6; }
-    </style>
+    </style>
+    <!-- jQuery UI for calendar datepickers (only for the filter panel) -->
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
+    <script>
+        (function($){
+            $(function(){
+                // Initialize jQuery UI datepicker on inputs marked with .datepicker
+                $('.datepicker').each(function(){
+                    // ensure keyboard-friendly placeholder
+                    if(!$(this).attr('placeholder')) $(this).attr('placeholder','dd/mm/yyyy');
+                    $(this).datepicker({
+                        dateFormat: 'dd/mm/yy',
+                        changeMonth: true,
+                        changeYear: true,
+                        showAnim: 'fadeIn'
+                    });
+                });
+            });
+        })(jQuery);
+    </script>

generic/views.py

@@ -43,7 +43,13 @@ from django.views.generic.edit import CreateView, UpdateView, DeleteView
 from django.views.generic.list import ListView
 from django.views.generic.detail import DetailView
 from django_filters.views import FilterView
-from django_filters import FilterSet, OrderingFilter, ModelMultipleChoiceFilter
+from django_filters import (
+    FilterSet,
+    OrderingFilter,
+    ModelMultipleChoiceFilter,
+    DateFromToRangeFilter,
+)
+from django_filters.widgets import DateRangeWidget
 from django_tables2.views import SingleTableMixin
 from reversion.views import RevisionMixin
 from atlas.models import CaseCollection, CaseDetail
@@ -733,6 +739,18 @@ class ExamViews(View, LoginRequiredMixin):
                 fields=(("name", "name"), ("exam_mode", "exam_mode"))
             )
 
+            # Allow filtering by start/end date ranges (render as paired date inputs)
+            start_date = DateFromToRangeFilter(
+                field_name="start_date",
+                label="Start date",
+                widget=DateRangeWidget(attrs={"class": "datepicker", "autocomplete": "off", "placeholder": "dd/mm/yyyy"}),
+            )
+            end_date = DateFromToRangeFilter(
+                field_name="end_date",
+                label="End date",
+                widget=DateRangeWidget(attrs={"class": "datepicker", "autocomplete": "off", "placeholder": "dd/mm/yyyy"}),
+            )
+
             class Meta:
                 model = exam
                 fields = {