过滤过去和未来日期的 DateTimeField

我的问题是我正在制作一个计时器，直到网站上的下一个事件。我将事件存储在 django 模型中。在模板中制作日期的输出，不知道怎么让事件依次出现。我设法在模板中过滤了过去的日期，但是当上一个事件过去时，我无法自动更改事件。也就是说，00.00.00 留在它之前。我也无法显示已过滤的第一个元素。只有 {% if forloop.counter0 == 1 %} 有效，但这会返回整个列表的元素，而不是过滤列表的元素。我只是想显示日期大于当前日期的第一个事件。我尝试在过滤后使用某种内部循环，但我做不到。我向你求助这个问题是因为我已经走到了一个大死胡同。我将非常感谢您的帮助。有一个想法是使用过滤器立即在views.py 中过滤事件，但我又一次感到困惑。我还是这个行业的新手，但我真的很想完成这个项目。

样本

{% for x in date %}

{% with alpha=0 %}
{% if x.date|timesince >= "1 sec" %}

{% else %}

{% if forloop.counter0 == 1 %}

<div class="mec-wrap">
    <article class="mec-event-countdown-style3 ">
        <div class="mec-event-countdown-part1">
            <div class="mec-event-countdown-part-title">
                <div class="mec-event-upcoming"><span>Далее</span> Ближайшее событие</div>
            </div>

              <div class="mec-event-countdown-part-details">

                <div class="mec-event-date">
                    <span class="mec-date1">{{x.date|date:"d"}}</span>
                    <span class="mec-date2">
                      {% if x.date|date:"m" == "01" %}Января{% endif %}
                      {% if x.date|date:"m" == "02" %}Февраля{% endif %}
                      {% if x.date|date:"m" == "03" %}Марта{% endif %}
                      {% if x.date|date:"m" == "04" %}Апреля{% endif %}
                      {% if x.date|date:"m" == "05" %}Мая{% endif %}
                      {% if x.date|date:"m" == "06" %}Июня{% endif %}
                      {% if x.date|date:"m" == "07" %}Июля{% endif %}
                      {% if x.date|date:"m" == "08" %}Августа{% endif %}
                      {% if x.date|date:"m" == "09" %}Сентября{% endif %}
                      {% if x.date|date:"m" == "10" %}Октября{% endif %}
                      {% if x.date|date:"m" == "11" %}Ноября{% endif %}
                      {% if x.date|date:"m" == "12" %}Декабря{% endif %}
                    </span>
                    <span class="mec-date3">{{x.date|date:"Y"}}</span>
                </div>
                <div class="mec-event-title-link">
                    <h4 class="mec-event-title">{{x.namedate}} {{x.date|date:" (H:i)"}}</h4>
                    <div class="mec-event-countdown">

                      <div class="blockl">
                          <p class="texth" id="days"></p>
                          <p class="label-w">дни</p>
                      </div>
                      <div class="block-w">
                          <p class="texth" id="hours"></p>
                          <p class="label-w">часы</p>
                      </div>
                      <div class="block-w">
                          <p class="texth" id="minutes"></p>
                          <p class="label-w">минуты</p>
                      </div>
                      <div class="block-w">
                          <p class="texth" id="seconds"></p>
                          <p class="label-w">секунды</p>
                      </div>
                </div>
                </div>
            </div>

        </div>
        <img src="{% static 'image/bible.jpg' %}" class="post-image"></img>
    </article>
    </div>

    <script>
    function makeTimer() {
       var endTime=new Date({{ x.date|date:"U" }} * 1000);
        endTime = (Date.parse(endTime) / 1000);

            var now = new Date();
            now = (Date.parse(now) / 1000);

            var timeLeft = endTime - now;

            var days = Math.floor(timeLeft / 86400);
            var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
            var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
            var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

            if (hours < "10") { hours = "0" + hours; }
            if (minutes < "10") { minutes = "0" + minutes; }
            if (seconds < "10") { seconds = "0" + seconds; }

            $("#days").html(days + "<span></span>");
            $("#hours").html(hours + "<span></span>");
            $("#minutes").html(minutes + "<span></span>");
            $("#seconds").html(seconds + "<span></span>");

    }

    setInterval(function() { makeTimer(); }, 1000);
    </script>

    {% endif %}
    {% endif %}
    {% endwith %}
{% endfor %}

视图.py

from django.shortcuts import render, redirect
from .models import Event
from datetime import date

def index(request):
    date = Event.objects.all()
    content = {"date": date}
    return render(request, 'Главная/Главная.html', content)

模型.py

from django.db import models
import os

class Event(models.Model):
    namedate = models.CharField(max_length=120)
    date = models.DateTimeField()

    def __str__(self):
        return self.namedate