我知道如何实施并已经在不同的网站上实施了各种日期输入。我使用的卫星数据通常以 YYYYddd 的格式标记，其中三个 d(s) 代表一年中的某天 /365（闰年为 366）。因此，向 HTML5 日期输入添加功能对我来说是有利的。
这个网站正是我想要做的，但是将其引入 HTML5。这是可能的事吗？如果没有，是否有任何资源可以基本上重新创建 HTML5 日期输入，以便我可以添加此功能？我经常使用 JS，所以我认为这不会成为我的限制。最好将其保留在原始日期输入中。
我知道该网站上的 JS 已经为我完成了，但重点是 HTML 部分。
我已经能够编写 JS 函数，通过简单的逻辑来显示一年中的某一天。我还没有尝试重新创建日历弹出窗口，但这是我的下一次尝试。
最终目标是将this 网站上的日历引入 HTML5。最好使用 HTML5 标准日期输入以实现交叉兼容性。
我想这就是你的意思。此代码的作用与您链接的网站的作用完全相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Picker</title>
<style>
#calcontainer {
position: relative;
margin: 20px;
}
#calendar {
border-collapse: collapse;
width: 100%;
}
#calendar th, #calendar td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
#calendar th {
background-color: #f2f2f2;
}
.calendar-row {
height: 50px;
}
</style>
</head>
<body>
<div id="calcontainer">
<!-- Navigation -->
<div>
<button id="cp_prevYear" onclick="changeYear(-1)">< Prev Year</button>
<button id="cp_prevMonth" onclick="changeMonth(-1)">< Prev Month</button>
<span id="cp_monthYear"></span>
<button id="cp_nextMonth" onclick="changeMonth(1)">Next Month ></button>
<button id="cp_nextYear" onclick="changeYear(1)">Next Year ></button>
</div>
<div>
<button onclick="toggleDayNumberView()">Toggle Day Number View</button>
</div>
<!-- Calendar -->
<table id="calendar">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<!-- Calendar dates will be populated here -->
</tbody>
</table>
</div>
<script>
let currentYear = new Date().getFullYear();
let currentMonth = new Date().getMonth(); // January is 0
let showDayNumbers = false;
function populateCalendar() {
const monthYearDisplay = document.getElementById('cp_monthYear');
const calendarBody = document.getElementById('calendar').getElementsByTagName('tbody')[0];
const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
monthYearDisplay.textContent = `${firstDayOfMonth.toLocaleString('default', { month: 'long' })} ${currentYear}`;
calendarBody.innerHTML = ''; // Clear existing calendar entries
// Add empty cells at the start of the month
for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
const cell = document.createElement('td');
calendarBody.appendChild(cell);
}
let dayNum = showDayNumbers ? getDayNumberOfYear(currentYear, currentMonth, 1) : 1;
// Populate the calendar with days
for (let i = 1; i <= daysInMonth; i++) {
const cell = document.createElement('td');
cell.textContent = showDayNumbers ? dayNum++ : i;
calendarBody.appendChild(cell);
if ((firstDayOfMonth.getDay() + i) % 7 === 0) { // Start new row every week
const row = document.createElement('tr');
row.className = 'calendar-row';
calendarBody.appendChild(row);
}
}
}
function changeMonth(delta) {
currentMonth += delta;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
} else if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
populateCalendar();
}
function changeYear(delta) {
currentYear += delta;
populateCalendar();
}
function toggleDayNumberView() {
showDayNumbers = !showDayNumbers;
populateCalendar();
}
function getDayNumberOfYear(year, month, day) {
const date = new Date(year, month, day);
const start = new Date(year, 0, 0);
const diff = date - start;
const oneDay = 1000 * 60 * 60 * 24;
return Math.floor(diff / oneDay);
}
// Initial population of the calendar
populateCalendar();
</script>
</body>
</html>