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

在许多 Web 应用程序中，经常需要显示一个日历以便用户选择日期。通常，这需要用复杂的 JavaScript 代码和 CSS 样式来实现。然而，有时候您只需要在页面上显示一个图标，并单击图标以显示日期选择器。在这篇文章中，我们将向您展示如何使用 JavaScript 来实现这个简单的需求。

HTML 代码

在我们开始编写 JavaScript 代码之前，我们需要一个带有单击图标的 HTML 元素。让我们看一下下面的 HTML 代码：

<div class="date-picker">
    <i class="fa fa-calendar"></i>
</div>

这里我们使用了 Font Awesome 的图标库来显示一个日历图标。

CSS 样式

接下来，我们需要定义一些 CSS 样式来将图标放在位置上并定义其外观。下面是我们将使用的 CSS 样式：

.date-picker {
    position: relative;
    display: inline-block;
}

.date-picker i {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
}

这个样式将图标放置在日期选择器的右上角，并定义了它的外观和指针。

JavaScript 代码

最后，我们需要编写一些 JavaScript 代码来显示日期选择器，并在用户单击图标时隐藏。我们将使用 flatpickr 插件来创建日期选择器。让我们看一下下面的 JavaScript 代码：

const datePicker = document.querySelector('.date-picker');
const datePickerIcon = datePicker.querySelector('i');

datePickerIcon.addEventListener('click', function() {
    flatpickr(datePicker, {
        clickOpens: true,
        dateFormat: "Y-m-d"
    });
});

这个代码通过查询 HTML DOM，获取日期选择器和日期选择器图标。然后，它侦听图标的点击事件，并在单击时创建一个新的日期选择器，并显示在日期选择器的相对位置上。

结论

在这篇文章中，我们向您展示了如何使用 JavaScript 仅显示一个日历单击图标，使用户能够选择日期。我们使用 CSS 和 flatpickr 插件来具体实现。这个功能很实用，可以让用户更方便地选择日期。