89 lines
2.8 KiB
HTML
89 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>カレンダー選択（jQuery版）</title>
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<style>
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 10px;
|
||
text-align: center;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
td input {
|
||
margin: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<h2>指定した月のカレンダー</h2>
|
||
<label for="year">年:</label>
|
||
<input type="number" id="year" value="2025">
|
||
<label for="month">月:</label>
|
||
<input type="number" id="month" value="5">
|
||
<button id="generate">カレンダー作成</button>
|
||
<table id="calendar"></table>
|
||
<button id="getDates">選択した日付を取得</button>
|
||
<p id="selectedDates"></p>
|
||
|
||
<script>
|
||
$(document).ready(function () {
|
||
$("#generate").click(function () {
|
||
generateCalendar();
|
||
});
|
||
|
||
$("#getDates").click(function () {
|
||
getSelectedDates();
|
||
});
|
||
|
||
function generateCalendar() {
|
||
let year = $("#year").val();
|
||
let month = $("#month").val();
|
||
let firstDay = new Date(year, month - 1, 1);
|
||
let lastDay = new Date(year, month, 0);
|
||
let daysInMonth = lastDay.getDate();
|
||
let weekDays = ["日", "月", "火", "水", "木", "金", "土"];
|
||
|
||
let html = "<thead><tr>";
|
||
$.each(weekDays, function (index, day) {
|
||
html += `<th>${day}</th>`;
|
||
});
|
||
html += "</tr></thead><tbody><tr>";
|
||
|
||
// 空白セルの追加
|
||
for (let i = 0; i < firstDay.getDay(); i++) {
|
||
html += "<td></td>";
|
||
}
|
||
|
||
for (let day = 1; day <= daysInMonth; day++) {
|
||
let dateValue = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||
html += `<td>${day}<br><input type="checkbox" value="${dateValue}"></td>`;
|
||
if (new Date(year, month - 1, day).getDay() === 6) {
|
||
html += "</tr><tr>"; // 土曜日なら改行
|
||
}
|
||
}
|
||
html += "</tr></tbody>";
|
||
|
||
$("#calendar").html(`<table>${html}</table>`);
|
||
}
|
||
|
||
function getSelectedDates() {
|
||
let selectedDates = $("#calendar input:checked").map(function () {
|
||
return $(this).val();
|
||
}).get();
|
||
$("#selectedDates").text("選択した日付: " + selectedDates.join(", "));
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |