“即时”比较用户输入的日期值
这个问题可能类似于另一个问题：
HTML Comparing 2 Dates with Javascript
但我不想使用button，只是让它变得即时。
我有两个date类型的输入，我想在它们之间进行比较。
<div>
<label style="font-family: 'Segoe UI';">Select a date.</label>
<br><br>
<span style="font-family: 'Segoe UI';">Since</span>
<input type="date" name="since" id="since" required="required" style="font-family: 'Segoe UI';"/>
<span style="font-family: 'Segoe UI';">Until</span>
<input type="date" name="until" id="until" required="required" style="font-family: 'Segoe UI';"/>
<br><br>
<button style="font-size: 14px; font-family: 'Segoe UI';" onclick="Validate()">COMPARE THIS</button>
</div>
<script type="text/javascript">
function Validate(){
var date1 = new Date(document.getElementById('since').value);
var date2 = new Date(document.getElementById('until').value);
if(date2 < date1) {
alert('The date cannot be less than the first date that you selected');
return false;
}else{
alert("It's OK");
return true;
}
}
</script>
现在条件完美地工作了，它比较两个日期，如果第二个日期小于第一个日期，就会显示一个错误。但这是使用一个按钮来触发比较。
是否可以在不使用按钮触发比较的情况下比较输入日期？并使用HTMLSelectElement.setCustomValidity()方法？
回答 2
Stack Overflow用户
发布于 2018-10-26 05:34:01
我认为你可以使用onchange事件来做这件事。我对您的代码片段做了一些修改，并为何时不验证设置了一个简单的条件。您可以将其调整为更复杂。
<div>
<label style="font-family: 'Segoe UI';">Select a date.</label>
<br><br>
<span style="font-family: 'Segoe UI';">Since</span>
<input onchange="Validate()" type="date" name="since" id="since" required="required" style="font-family: 'Segoe UI';"/>
<span style="font-family: 'Segoe UI';">Until</span>
<input onchange="Validate()" type="date" name="until" id="until" required="required" style="font-family: 'Segoe UI';"/>
</div>
<script type="text/javascript">
function Validate(){
var input1 = document.getElementById('since').value;
var input2 = document.getElementById('until').value;
if(input1 != "" && input2 != ""){
var date1 = new Date(input1);
var date2 = new Date(input2);
if(date2 < date1) {
alert('The date cannot be less than the first date that you selected');
return false;
}else{
alert("It's OK");
return true;
}
}
}
</script>
Stack Overflow用户
发布于 2018-10-26 06:05:58
您需要小心在<input type="date">中使用哪个事件，以避免意外的后果。只要用户在日期的最后一个空部分输入任何数字，就可能触发input和change事件(由于对<input type="date">的支持参差不齐，不一定在不同的浏览器中保持一致)。
例如(在Chrome中)，如果用户输入"12“作为月份，"31”作为日期，然后在年份中输入"2“(意图是输入"2018")，input和change事件将在输入"2”时立即触发，在您的场景中，验证函数将在用户完成输入年份之前将"12/31/0002“与另一个日期进行比较(这将在用户尝试输入剩余的年份数字时重复发生)。根据您通知用户验证结果的方式，您可能能够很好地解决这个问题，但是如果您使用alert()，情况就不太妙了。
因此，使用像blur这样的事件来触发验证比较可能更安全。类似于：
const since = document.querySelector('#since');
const until = document.querySelector('#until');
const message = document.querySelector('#message');
const compareDates = () => {
const sval = since.value;
const uval = until.value;
if (sval && uval && (uval < sval)) {
message.innerHTML = 'The "Until" date must come after the "Since" date.';
} else {
message.innerHTML = '';
}
};
since.addEventListener('blur', compareDates);
until.addEventListener('blur', compareDates);#message {
margin: 8px 0;
color: red;
}<label for="since">Since</label>
<input type="date" name="since" id="since" required>
<label for="until">Until</label>
<input type="date" name="until" id="until" required>
<div id="message"></div>
https://stackoverflow.com/questions/52998216
复制相似问题