这个问题可能类似于另一个问题:
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()
方法?
发布于 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>
发布于 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
复制相似问题