Datepicker.css
<style>
* {
box-sizing: border-box;
}
table {
width: 100%;
}
table,
th,
td {
border-collapse: collapse;
}
th,
td {
border: 1px solid #222;
padding: 5px 10px;
}
th {
cursor: pointer;
}
</style>Datepicker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Datepicker.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<input type="text" id="input_date" />
<div id="div_calendar" style="width: 300px; display: none">
<div>
<button type="button" onclick="changeMonth(-1)"><</button>
<input
type="number"
id="year"
value="2020"
style="width: 80px; display: initial"
onchange="changeYear()"
/>
<select
id="month"
style="width: 80px; display: initial"
onchange="changeMonth()"
>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<button type="button" onclick="changeMonth(1);">></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody id="tb_body"></tbody>
</table>
</div>
</div>
</body>
<script src="Datepicker.js"></script>
</html>
Datepicker.js
<script>
let current_year = new Date().getFullYear();
let current_month = new Date().getMonth() + 1;
document.getElementById("year").value = current_year;
document.getElementById("month").value = current_month;
changeYearMonth(current_year, current_month);
document.getElementById("input_date").addEventListener("click", function () {
var obj = document.getElementById("div_calendar");
if (obj.style.display == "") {
obj.style.display = "none";
} else {
obj.style.display = "";
}
});
function checkLeapYear(year) {
// 윤년인지 체크
if (year % 400 == 0) {
// 400으로 나누어지면, 100, 4로도 나누어지기 때문에 윤년
return true;
} else if (year % 100 == 0) {
// 위의 if문을 통해 400으로 나누어지지 않는다는 것을 확인 후, 100으로 나누어지면 평년
return false;
} else if (year % 4 == 0) {
// 위의 모든 조건을 만족하지 않지만 4로 나누어지면 윤년
return true;
} else {
return false; // 위의 모든 조건을 만족하지 않으면 평년
}
}
function getFirstDayOfWeek(year, month) {
if (month < 10) month = "0" + month;
return new Date(year + "-" + month + "-01").getDay();
}
function changeYear() {
current_year = document.getElementById("year").value;
changeYearMonth(current_year, current_month);
}
function changeYearMonth(year, month) {
let month_day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (month == 2) {
if (checkLeapYear(year)) month_day[1] = 29;
}
let first_day_of_week = getFirstDayOfWeek(year, month);
let arr_calendar = [];
for (let i = 0; i < first_day_of_week; i++) {
arr_calendar.push("");
}
for (let i = 1; i <= month_day[month - 1]; i++) {
arr_calendar.push(String(i));
}
let remain_day = 7 - (arr_calendar.length % 7);
if (remain_day < 7) {
for (let i = 0; i < remain_day; i++) {
arr_calendar.push("");
}
}
renderCalender(arr_calendar);
}
function renderCalender(data) {
let h = [];
for (let i = 0; i < data.length; i++) {
if (i == 0) {
h.push("<tr>");
} else if (i % 7 == 0) {
h.push("</tr>");
h.push("<tr>");
}
h.push(
'<tdtoken operator">+
data[i] +
');"style="cursor:pointer;">' +
data[i] +
"</td>"
);
}
h.push("</tr>");
document.getElementById("tb_body").innerHTML = h.join("");
}
function setDate(day) {
if (day < 10) day = "0" + day;
document.getElementById("input_date").value =
current_year + "-" + current_month + "-" + day;
document.getElementById("div_calendar").style.display = "none";
}
function changeMonth(diff) {
if (diff == undefined) {
current_month = parseInt(document.getElementById("month").value);
} else {
current_month = current_month + diff;
if (current_month == 0) {
current_year = current_year - 1;
current_month = 12;
} else if (current_month == 13) {
current_year = current_year + 1;
current_month = 1;
}
}
loadCalendar();
}
function loadCalendar() {
document.getElementById("year").value = current_year;
document.getElementById("month").value = current_month;
changeYearMonth(current_year, current_month);
}
</script>
코딩공부