備註: 這次的日期打印是練習使用迴圈的方式，概念和上次的list差不多。
第一次使用日期選單是disable，需先選擇年和月才會打開。透過年和月來決定要跑幾次迴圈、印幾個日期選項。
<!DOCTYPE html>
<html>
<head>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<title>選擇日期</title>
<link rel="stylesheet" href="style/Date.css" />
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('idSelectDay').setAttribute("disabled", "");
for (let i = 1; i <= 12; i++) { //新增月
let opt = document.createElement("option");
opt.setAttribute("value", i);
let optTxt = document.createTextNode(i);
opt.appendChild(optTxt);
//opt.value = i;
//opt.innerHTML = i;
document.getElementById('idSelectMonth').appendChild(opt);
}
let y = new Date().getFullYear();
let shy = y - 10;
for (let i = y; i >= shy; i--) { //新增年
let opt = document.createElement("option");
opt.setAttribute("value", i);
let optTxt = document.createTextNode(i);
opt.appendChild(optTxt);
//opt.value = i;
//opt.innerHTML = i;
document.getElementById('idSelectYear').appendChild(opt);
}
document.getElementById('idSelectYear').addEventListener("change", changY);
document.getElementById('idSelectMonth').addEventListener("change", changM);
document.getElementById('idSelectDay').addEventListener("change", showDay);
});
let countY = false;
let countM = false;
let countD = false;
function changY() {
countY = true;
if (countD) {
let ex = document.getElementById("idSelectDay");
let ex2 = ex.getElementsByTagName("option");
let len = ex2.length;
for (i = 0; i < len; i++) {
ex2[0].remove();
}
countD = false;
}
if (countY && countM) {
document.getElementById("idSelectDay").removeAttribute("disabled");
changeD();
showDay();
};
};
function changM() {
countM = true;
if (countD) {
let ex = document.getElementById("idSelectDay");
let ex2 = ex.getElementsByTagName("option");
let len = ex2.length;
for (i = 0; i < len; i++) {
ex2[0].remove();
}
countD = false;
}
if (countY && countM) {
document.getElementById("idSelectDay").removeAttribute("disabled");
changeD();
showDay();
}
};
function changeD() {
let y = document.getElementById('idSelectYear').value;
let m = document.getElementById('idSelectMonth').value;
let check = new Date(y, 1, 29).getDate();
let check2 = new Date(y, m - 1, 31).getDate(); //若是31超過會跳到隔一個月
countD = true;
if (check == 29 && m == 2) {
for (let i = 1; i <= 29; i++) {
let opt = document.createElement("option");
opt.setAttribute("value", i);
opt.setAttribute("id", "day");
let text = document.createTextNode(i);
opt.appendChild(text);
document.getElementById("idSelectDay").appendChild(opt);
}
} else if (check == 1 && m == 2) {
for (let i = 1; i <= 28; i++) {
let opt = document.createElement("option");
opt.setAttribute("value", i);
opt.setAttribute("id", "day");
let text = document.createTextNode(i);
opt.appendChild(text);
document.getElementById("idSelectDay").appendChild(opt);
}
} else if (check2 == 31 && m != 2) {
for (let i = 1; i <= 31; i++) {
let opt = document.createElement("option");
opt.setAttribute("value", i);
opt.setAttribute("id", "day");
let text = document.createTextNode(i);
opt.appendChild(text);
document.getElementById("idSelectDay").appendChild(opt);
}
} else {
for (let i = 1; i <= 30; i++) {
let opt = document.createElement("option");
opt.setAttribute("value", i);
opt.setAttribute("id", "day");
let text = document.createTextNode(i);
opt.appendChild(text);
document.getElementById("idSelectDay").appendChild(opt);
}
}
}
function showDay() {
if (countY && countM && countD && document.getElementById('idSelectDay').value != '--') {
let y = document.getElementById('idSelectYear').value;
let m = document.getElementById('idSelectMonth').value;
let d = document.getElementById('idSelectDay').value;
console.log(d);
document.getElementById('p').innerHTML = `您選擇的日期是${y}年 ${m}月 ${d}日`;
} else {
document.getElementById('p').innerText = '請選擇日期';
}
}
</script>
</head>
<body>
<fieldset class="border">
<div class="floatL">
<select id="idSelectYear">
<option style="display:none">----</option>
</select>
年
<select id="idSelectMonth">
<option style="display:none">--</option>
</select>
月
<select id="idSelectDay">
<option style="display:none">--</option>
</select>
日
</div>
<div class="floatR">
<p id="p"></p>
</div>
</fieldset>
</body>
</html>
留言列表
