HTML Date Input Modification for Day of the Year

I know how to implement and have implemented various date inputs across different websites. I work with satellite data that often comes marked in such a format as YYYYddd where the three d(s) represent the day of the year /365 (366 in a leap year). Therefore advantageous for me to add a functionality to the HTML5 date input.

This website is excatly what I want to do however bring it into HTML5. Is that something that is possible? If not, is there any resource to basically recreate the HTML5 date input so that I can add this functionality? I work a lot with JS, so I don't think that would be a limitation for me. It would be ideal to keep it in the original date input.
I know that it is already done for me in JS on that webiste but emphasis on the HTML part.

I have been able to write JS functions that bring the day of the year through simple logic. I have not tried recreating the calendar popup yet but that is my next try.

The end goal in this is to bring the calendar on this site into HTML5. Preferably with a HTML5 standard date input for cross-compatibility.

Solution

I think this is what you meant. This code does exactly what the website you linked does.

<!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)">&lt; Prev Year</button>
            <button id="cp_prevMonth" onclick="changeMonth(-1)">&lt; Prev Month</button>
            <span id="cp_monthYear"></span>
            <button id="cp_nextMonth" onclick="changeMonth(1)">Next Month &gt;</button>
            <button id="cp_nextYear" onclick="changeYear(1)">Next Year &gt;</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>