日期对比（事件日期与当前日期）：如何自动隐藏过期事件？

别慌，这个需求其实很容易搞定！我来一步步带你实现：

1. 给事件元素标记日期 #

首先，你需要在每个事件的HTML标签里，用data-*属性存储它的日期（就用你现有的DD.MM.YYYY格式即可），比如：

<div class="event" data-date="06.01.2018">新年派对回顾</div>
<div class="event" data-date="08.03.2018">春季新品发布会</div>
<div class="event" data-date="20.02.2018">月度分享会</div>

2. 写个日期格式转换函数 #

浏览器自带的Date对象更适配YYYY-MM-DD这种标准格式，所以咱们需要把你的DD.MM.YYYY转换成可直接对比的日期对象：

function parseEventDate(dateStr) {
  // 拆分日、月、年
  const [day, month, year] = dateStr.split('.');
  // 注意：JS的月份是从0开始计数的，所以要减1
  return new Date(year, month - 1, day);
}

3. 核心对比逻辑：隐藏过期事件 #

接下来写核心功能代码——获取当前日期，遍历所有事件，对比后自动隐藏过期的：

function hideExpiredEvents() {
  // 获取当前日期，同时清零时分秒，确保只对比年月日
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  // 选中所有事件元素
  const allEvents = document.querySelectorAll('.event');

  allEvents.forEach(event => {
    const eventDateStr = event.getAttribute('data-date');
    const eventDate = parseEventDate(eventDateStr);

    // 如果事件日期早于今天，就隐藏它
    if (eventDate < today) {
      // 方式1：直接修改样式隐藏
      event.style.display = 'none';
      // 方式2：添加CSS类（更推荐，方便后续扩展样式）
      // event.classList.add('expired-hidden');
    }
  });
}

// 页面加载完成后自动执行
window.addEventListener('load', hideExpiredEvents);

4. （可选）用CSS优化隐藏效果 #

如果想让隐藏更优雅（比如加个渐隐动画），可以先定义CSS类：

.expired-hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

然后把JS里的event.style.display = 'none'换成event.classList.add('expired-hidden')就行。

测试一下：当当前日期是23.02.2018时，06.01.2018的事件会被自动隐藏，08.03.2018的事件会正常显示，完全符合你的需求~

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