如何在EJS模板中仅展示event_date为未来时间的活动

EJS 本身支持原生 JavaScript 语法，你可以通过两种方式实现过滤需求： #

方案1：直接修改EJS模板（改动最小） #

在现有循环内加时间判断逻辑，只渲染符合条件的活动：

<% for (let event of events){%>
    <!-- 仅event_date晚于当前时间的活动才会被渲染 -->
    <% if (new Date(event.event_date) > new Date()) { %>
    <div class="card mb-3">
        <div class="row">
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title"><%= event.event_name %> </h5>
                    <p class="text">Artist: <%= event.artist.username %></p>
                    <p class="text"><%= event.location %> </p>
                    <p class="text">
                        <small class="text-muted"><%= event.description %> </small>
                    </p>
                    <a class="btn btn-primary" href="/events/<%= event.id %>">View Event</a>
                </div>
            </div>
        </div>
    </div>
    <% } %>
<% }%>

注意：需要确保你的event_date字段是可被JS的Date对象解析的标准格式（如ISO时间字符串、时间戳），如果是自定义格式需要先做格式转换再进行比较。

如果需要展示今日及未来的所有活动，可以把时间判断改成按日期零点比较：

<% 
// 先获取今日零点的时间对象
const todayStart = new Date();
todayStart.setHours(0, 0, 0, 0);
%>
<% for (let event of events){%>
    <% if (new Date(event.event_date) >= todayStart) { %>
    <!-- 原有卡片代码 -->
    <% } %>
<% }%>

方案2：服务端提前过滤（更推荐） #

在给EJS模板传参前，先在服务端逻辑里过滤好未来活动再传，模板不用做任何改动，逻辑更清晰也减少模板渲染压力，以Express为例：

// 服务端路由逻辑示例
app.get('/events', async (req, res) => {
  // 从数据库/其他来源拿到所有活动数据
  const allEvents = await Event.findAll();
  // 过滤出未来活动
  const futureEvents = allEvents.filter(event => new Date(event.event_date) > new Date());
  // 把过滤后的数组传给模板
  res.render('events/index', { events: futureEvents });
})

内容的提问来源于stack exchange，提问作者econobro