以下が日付を入力するフォームを実装するための HTML/CSS/JavaScript コードです。セキュリティ脆弱性を考慮し、eval や他のサイトへの遷移、リダイレクトなどのコードは含まれていません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日付を入力するフォーム</title>
<style>
.calendar-wrapper {
position: relative;
display: inline-block;
}
.calendar-wrapper input {
width: 120px;
padding: 4px;
font-size: 16px;
}
.calendar {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
width: 240px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border-radius: 4px;
background-color: white;
padding: 10px;
font-family: Arial, sans-serif;
}
.calendar .month-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.calendar .prev-button, .calendar .next-button {
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.calendar .month-name {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
.calendar table {
width: 100%;
border-collapse: collapse;
}
.calendar td {
text-align: center;
padding: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.calendar td:hover {
background-color: #ebebeb;
}
.calendar .today {
font-weight: bold;
color: blue;
}
.calendar .selected {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="calendar-wrapper">
<input type="text" id="date-input">
<div class="calendar" id="calendar"></div>
</div>
<script>
// カレンダーを表示する要素
const calendarElement = document.getElementById('calendar');
// 入力欄に日付を表示するための要素
const dateInputElement = document.getElementById('date-input');
// カレンダーの日付を選択したときに呼ばれる関数
function handleDateSelect(event) {
// 選択した日付を yyyy-mm-dd 形式の文字列に変換する
const year = event.target.dataset.year;
const month = event.target.dataset.month;
const day = event.target.textContent.padStart(2, '0');
const dateString = `${year}-${month}-${day}`;
// 入力欄に日付をセットする
dateInputElement.value = dateString;
// カレンダーを消す
calendarElement.style.display = 'none';
}
// カレンダーを表示する
function showCalendar() {
// カレンダーがすでに表示されている場合は消す
if (calendarElement.style.display !== 'none') {
calendarElement.style.display = 'none';
return;
}
// 入力欄に入っている日付を取得する
const inputDate = new Date(dateInputElement.value);
// 入力欄に日付が入っていない場合は、今日の日付を入れる
if (isNaN(inputDate.getTime())) {
inputDate = new Date();
}
// カレンダーの HTML を生成する
let html = `
<div class="month-header">
<div class="prev-button"><</div>
<div class="month-name"></div>
<div class="next-button">></div>
</div>
<table>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
`;
const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const month = inputDate.getMonth();
const year = inputDate.getFullYear();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const firstDayOfMonth = new Date(year, month, 1).getDay();
let currentDay = 1 - firstDayOfMonth;
while (currentDay <= daysInMonth) {
html += '<tr>';
for (let i = 0; i < 7; i++) {
const currentDate = new Date(year, month, currentDay);
const isToday = currentDate.toDateString() === new Date().toDateString();
const isSelectedDate = currentDate.toDateString() === inputDate.toDateString();
html += `<td data-year="${year}" data-month="${month + 1}"`;
if (currentDay > 0 && currentDay <= daysInMonth) {
html += `>${currentDay}`;
if (isToday) {
html += `<div class="today">${monthNames[month].slice(0, -1)}の今日</div>`;
}
if (isSelectedDate) {
html += '<div class="selected">選択中</div>';
}
currentDay++;
} else {
html += '></td>';
}
html += '</td>';
}
html += '</tr>';
}
html += `
</tbody>
</table>
`;
// カレンダーの HTML を要素にセットする
calendarElement.innerHTML = html;
// カレンダーのタイトルに月・年を表示する
calendarElement.querySelector('.month-name').textContent = `${monthNames[month]} ${year}`;
// カレンダーのセルをクリックしたときに日付を選択するイベントリスナーをセットする
calendarElement.querySelectorAll('td').forEach((cell) => {
cell.addEventListener('click', handleDateSelect);
});
// カレンダーを表示する
calendarElement.style.display = 'block';
// 前月ボタンがクリックされたときの処理をセットする
calendarElement.querySelector('.prev-button').addEventListener('click', () => {
inputDate.setMonth(inputDate.getMonth() - 1);
showCalendar();
});
// 翌月ボタンがクリックされたときの処理をセットする
calendarElement.querySelector('.next-button').addEventListener('click', () => {
inputDate.setMonth(inputDate.getMonth() + 1);
showCalendar();
});
}
// 入力欄をクリックしたときにカレンダーを表示するイベントリスナーをセットする
dateInputElement.addEventListener('click', showCalendar);
</script>
</body>
</html>
```
ジョークとしては「カレンダーには重要な日にちには ☆ を打てばわかりやすい」というものがありますが、セキュリティ上の問題もあるため今回の実装には含めませんでした。
