在输入类型日期中限制未来日期

当我们使用日期输入框时，有时候需要限制用户选择的日期必须是今天或者过去的日期，而不能选择未来的日期。这个需求在很多场景下都比较常见，比如预约出行时间、生日等。

本文将介绍如何利用JavaScript来实现在输入类型日期中限制未来日期。

HTML

首先，在HTML中我们需要添加一个输入类型为日期的文本框，如果需要限制未来日期，我们需要添加min属性，将其设置为今天的日期。代码如下：

<label for="date">选择日期：</label>
<input type="date" id="date" name="date" min="2021-09-23"/>

JavaScript

接下来我们需要编写JavaScript代码来限制未来日期。

首先我们需要获取到输入框的date对象，在获取对象时，需要判断一下浏览器的支持情况，代码如下：

var date = document.getElementById("date");
if(date.type !== "date") {
    date.type = "text";
}

上述代码中，我们先获取到了id为date的输入框对象，然后判断了一下这个输入框对象的类型，如果类型是日期类型，那么我们什么都不做，否则我们把它的类型改为文本。

接着，我们需要定义一个函数，这个函数会在用户选择日期时触发，判断用户选择的日期是否是未来的日期。如果是未来日期，我们就弹出提示框告诉用户，不能选择未来日期，并将输入框的日期设置为今天的日期。代码如下：

function checkDate(input) {
    var selectedDate = new Date(input.value);
    var now = new Date();
    if(selectedDate > now) {
        alert("不能选择未来日期！");
        input.value = now.toISOString().slice(0,10);
    }
}

上述代码中，我们定义了一个名为checkDate的函数，这个函数需要传入一个参数input，这个参数是一个输入框对象。

在函数中，我们首先获取到用户选择的日期，同时获取到今天的日期，然后进行比较。如果选择的日期大于今天的日期，就弹出一个提示框告诉用户不能选择未来日期，并将输入框的值设置为今天的日期。

最后，我们再将这个函数绑定到输入框的onchange事件上，当用户选择日期时，就会自动触发这个函数，实现限制未来日期的效果。代码如下：

date.addEventListener("change", function() {
    checkDate(date);
});

效果

最后，我们来看一下运行效果。当我们打开页面，点击日期输入框时，系统会自动弹出日期选择器。如果我们选择一个未来的日期，比如2022年1月1日，这时弹出一个警告框，告诉我们不能选择未来日期，并且输入框中的日期会自动变为今天的日期。

总结

本文介绍了如何利用JavaScript实现在输入类型日期中限制未来日期的效果。通过添加min属性和编写JavaScript代码，我们实现了一个简单的限制未来日期的程序。这种方法可以应用在很多场景中，希望对大家有所帮助。