📌  相关文章
📜  在 inpit 日期选择器中禁用过去的日期 (1)

📅  最后修改于: 2023-12-03 15:07:40.462000             🧑  作者: Mango

在 input 日期选择器中禁用过去的日期

当使用日期选择器时，我们经常需要限制用户只能选择未来的日期，而禁止选择过去的日期。在这篇文章中，我们将介绍如何使用 JavaScript 禁用 input 日期选择器中的过去日期。

HTML Markup

首先，我们需要在 HTML 中添加一个日期选择器(input元素和type=”date”)，如下所示：

<label for="date">请选择日期:</label>
<input type="date" id="date">
JavaScript

在 JavaScript 中，我们将为日期选择器(input元素和type=”date”)添加一个事件监听器（addEventListener）。每当用户改变日期时，我们会在事件侦听器中检查日期是否是过去的日期。如果是过去的日期，我们将更新日期选择器的值为未来的日期。

// 获取日期选择器(input元素和type="date")
const dateInput = document.getElementById("date");

// 添加事件监听器
dateInput.addEventListener("input", function(event) {
  const selectedDate = new Date(event.target.value); // 获取选择的日期
  const today = new Date(); // 获取当前日期
  
  // 检查选择的日期是否是过去的日期
  if(selectedDate < today) {
    // 如果是过去的日期，将日期选择器的值更新为未来的日期
    const tomorrow = new Date(today);
    tomorrow.setDate(today.getDate() + 1);
    dateInput.value = tomorrow.toISOString().substr(0, 10);
  }
});

在上面的代码中，我们首先获取了日期选择器(input元素和type=”date”)，然后为其添加了一个事件监听器。每当用户选择一个日期时，我们将获取选择的日期和当前日期。然后，我们检查选择的日期是否是过去的日期。如果是过去的日期，我们将更新日期选择器的值为未来的日期。

完整代码

完整的 HTML 代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>在 input 日期选择器中禁用过去的日期</title>
</head>
<body>
  <label for="date">请选择日期:</label>
  <input type="date" id="date">

  <script>
    const dateInput = document.getElementById("date");
    dateInput.addEventListener("input", function(event) {
      const selectedDate = new Date(event.target.value);
      const today = new Date();
      
      if(selectedDate < today) {
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1);
        dateInput.value = tomorrow.toISOString().substr(0, 10);
      }
    });
  </script>
</body>
</html>
结论

通过 JavaScript，我们可以很容易地禁用 input 日期选择器中的过去日期。我们可以使用addEventlistener 和 Date()这些强大的 JavaScript 功能来实现。使日期选择器更加易于使用，并且减少了用户输入错误选择过去日期造成的不便。