如何使用 JavaScript 仅在图标上单击显示日历？

有时候，我们需要在一个网页中添加一个简单的日历，来让用户选择一个日期。为了节省空间，我们可能会想要通过单击一个图标来显示日历。下面是使用 JavaScript 实现这个功能的步骤：

1. HTML

首先，我们需要添加 HTML 代码来创建一个图标和一个空白的 DIV 用于显示日历：

<span id="calendar-icon" onclick="showCalendar()">&#128197;</span>
<div id="calendar-container"></div>

在这个例子中，我们添加了一个名为 "calendar-icon" 的 SPAN 元素，它包含了一个类似日历的图标。我们还添加了一个名为 "calendar-container" 的 DIV 元素，它用于显示日历。

2. CSS

接下来，我们需要添加 CSS 样式来将图标设置为可点击的，并隐藏空白的 DIV：

#calendar-icon {
  cursor: pointer;
}

#calendar-container {
  display: none;
}

在这个例子中，我们将鼠标光标设置为指针，以提示用户该图标可以被点击。我们还将 "calendar-container" 的 display 样式设置为 none，以在页面加载时隐藏它。

3. JavaScript

最后，我们需要使用 JavaScript 来实现当图标被单击时，显示日历：

function showCalendar() {
  var container = document.getElementById("calendar-container");
  if (container.style.display === "none") {
    container.style.display = "block";
  } else {
    container.style.display = "none";
  }
}

在这个例子中，我们首先获取名为 "calendar-container" 的 DIV 元素。然后我们检查该元素的 display 样式是否为 none。如果是，我们将其设置为 block，以显示日历。如果不是，则将其设置为 none，以隐藏日历。

如果您希望在日历中选择一个日期时，将所选日期返回到页面上，您可以使用像 bootstrap-datepicker 或 Pikaday 这样的 JavaScript 库。

最终的 HTML 代码如下：

<span id="calendar-icon" onclick="showCalendar()">&#128197;</span>
<div id="calendar-container"></div>

<script>
function showCalendar() {
  var container = document.getElementById("calendar-container");
  if (container.style.display === "none") {
    container.style.display = "block";
  } else {
    container.style.display = "none";
  }
}
</script>

<style>
#calendar-icon {
  cursor: pointer;
}

#calendar-container {
  display: none;
}
</style>

结论

使用 JavaScript 仅在图标上单击显示日历是一项非常简单的任务，只需遵循三个简单的步骤。如果您想将日历集成到您的网站或应用程序中，您可以通过使用像 bootstrap-datepicker 或 Pikaday 这样的 JavaScript 库来使其更加易用和强大。