Flatpickr教程：使用JavaScript快速创建一个自定义日期选择器

部分数据来源：ChatGPT 

引言

        如果您是一个网站开发者，想为自己的网站添加方便易用的日期选择对话框，那么Flatpickr日期选择对话框可能正好符合您的需要。在这篇文章中，我们将详细介绍如何使用Flatpickr日期选择对话框，并提供一份样例代码供您参考。

Flatpickr是一个轻量级、快速、灵活的JavaScript日期选择器，具有很多功能，如时间选择器、本地化支持、多种日期格式等。Flatpickr易于集成到你的网站中，只需几行简单的代码即可实现一个高度定制化的日期选择对话框。

以下是一个基于Flatpickr实现的日期选择对话框的完整代码，供您参考：

现在让我们来逐步分析上述代码，以便理解这个日期选择对话框是如何工作的。

第一步：引入Flatpickr样式文件

第二步：创建日期选择器输入框

在HTML中创建一个DIV元素，并设置其class为“date-picker”，在该元素中创建一个只读的文本输入框，id为“date-picker-display”，这将用于显示日期选择器选定的日期和时间。

第三步：引入Flatpickr库文件和JS代码

在HTML body标签底部，在Flatpickr样式文件之后，引入Flatpickr库文件和上面的JS代码。这段JS代码使用了Flatpickr库中的函数，将日期选择器与输入框绑定，并将日期格式设置为"Y-m-d H:i"，即“年-月-日 时:分”的形式，以便用户能够选择日期和时间。

第四步：定义日期选择器样式

这部分代码提供了日期选择器的样式定义，包括整个页面的背景色、日期显示框的边框、字体等。这些样式可以根据需要进行修改。

第五步：定义年、日、时、分数组

const years = [];
const currentYear = new Date().getFullYear();
for (let i = currentYear - 10; i <= currentYear + 10; i++) {
  years.push(i);
}
const days = [];
for (let i = 1; i <= 31; i++) {
  days.push(i);
}
const hours = [];
for (let i = 0; i <= 23; i++) {
  hours.push(i);
}
const minutes = [];
for (let i = 0; i <= 59; i++) {
  minutes.push(i);
}

这部分代码定义了四个数组，分别用于存储可选的年、日、时和分选项。在日期选择器弹出框中，我们将使用这些数组来显示可供用户选择的日期和时间选项。

第六步：更新日期选择框显示内容

function updateDatePickerDisplay() {
  const year = datePickerYearColumn.querySelector(".date-picker-option-active").textContent;
  const day = datePickerDayColumn.querySelector(".date-picker-option-active").textContent;
  const hour = datePickerHourColumn.querySelector(".date-picker-option-active").textContent;
  const selectedDate = new Date(`${year}-${monthIndex + 1}-${day} ${hour}:${minute}`);
  flatpickr("#date-picker-display", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    defaultDate: selectedDate
  });
}

这部分代码定义一个名为“updateDatePickerDisplay()”的函数，用于更新日期选择框中显示的日期和时间。在该函数中，我们首先获取当前年、日和小时列中被激活的选项的文本内容，并使用这些值创建一个新的Date对象，以便Flatpickr可以正确显示日期和时间。最后，我们使用“flatpickr()”函数更新日期选择框的默认日期。

第七步：激活和取消日期选择器的选项

        这部分代码定义了两个函数，用于激活和取消日期选择器中的选项。当用户单击某个选项时，我们将使用这些函数将该选项标记为“active”，以便用户可以看到该选项被选择了。

function activateDatePickerOption(element) {
  element.classList.add("date-picker-option-active");
}

function deactivateDatePickerOption(element) {
  element.classList.remove("date-picker-option-active");
}

第八步：滚动到日期选择器指定选项

function scrollToOption(element, index) {
  const options = element.querySelectorAll(".date-picker-option");
  const optionHeight = options[0].offsetHeight;
  const scrollDistance = optionHeight * (index - 2);
  element.scroll({ top: scrollDistance, behavior: "smooth" });
}

这部分代码定义了一个名为“scrollToOption()”的函数，用于将日期选择器滚动到指定选项。当用户选择不同时间和日期时，我们将使用该函数使得选择框能够滚动到正确的位置，以便显示正确的选项。

运行效果