我尝试在已有的stackoverflow答案中寻找解决方案,但没有找到合适的答案。
我有三个字段:
- 年份 -
<input ...>
- 月份 -
<select>
- 日期 -
<input ...>
我的问题涉及闰年。如果用户选择二月份,则需要根据提供的年份限制日期输入。
示例
- 给定2012 / 二月 - 有效输入为1至29天
- 给定2013 / 二月 - 有效输入为1至28天
不幸的是,我需要在所有现代浏览器以及IE7和IE8中支持此功能。
我尝试在已有的stackoverflow答案中寻找解决方案,但没有找到合适的答案。
我有三个字段:
<input ...>
<select>
<input ...>
我的问题涉及闰年。如果用户选择二月份,则需要根据提供的年份限制日期输入。
示例
不幸的是,我需要在所有现代浏览器以及IE7和IE8中支持此功能。
逻辑来自:JavaScript中判断闰年的方法
以下是如何应用到一个简单表单中的示例代码。
我只为二月份验证了有效性,试一下并让我知道您是否有任何问题。
function isLeapYear(yr)
{
return ((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0);
}
window.onload = function(){
document.getElementById("validate").onclick = function(){
var output = document.getElementById("isValid");
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
var yearVal = parseInt(year.value);
var monthVal = parseInt(month.options[month.selectedIndex].value);
var dayVal = parseInt(day.value);
console.log(monthVal + "/" + dayVal + "/" + yearVal);
if(monthVal === 2){
if(isLeapYear(yearVal)){
output.innerHTML = dayVal >= 1 && dayVal <= 29 ? "Yes" : "No";
}else{
output.innerHTML = dayVal >= 1 && dayVal <= 28 ? "Yes" : "No";
}
}
};
};
<input type="text" id="year" value="2012" />
<select id="month">
<option value="1">Jan</option>
<option value="2" selected=selected>Feb</option>
<option value="3">Mar</option>
<option value="12">...etc...</option>
</select>
<input type="text" id="day" value="29" />
<br />
<button id="validate">Validate</button>
<p>
IsValid: <span id="isValid"></span>
</p>
function check_date(year, month, date) {
var y = Number(year);
var m = Number(month);
var d = Number(date);
var date = new Date(y, m - 1, d);
return (
date.getFullYear() === y &&
date.getMonth() === m - 1 &&
date.getDate() === d
);
}
document.getElementById("validate").onclick = function() {
alert(check_date(
document.getElementById("year").value,
document.getElementById("month").value,
document.getElementById("date").value
));
}
input,
select {
width: 8em;
}
<input id="year" placeholder="Year">
<select id="month">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<input id="date" placeholder="date">
<input id="validate" type="button" value="Check date">