(Sample)

以下のフォームは、「15分刻みの時間を指定したい」というニーズに応えたフォームです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entry Form</title>
</head>
<body>
    <form action="#" method="get">
        <label for="date-input">日付:</label>
        <input type="date" id="date-input" required>

        <label for="time-input">時刻:</label>
        <select id="time-input" required></select>

        <script>
            let dateInput = document.getElementById("date-input");
            let timeInput = document.getElementById("time-input");

            // 今日の日付を取得し、最小値として設定
            let currentDate = new Date().toISOString().slice(0, 10);
            dateInput.setAttribute("min", currentDate);

            // 15分刻みの時間を生成する関数
            function populateTimeSelect(selectElement) {
                for (let hour = 0; hour < 24; hour++) {
                    for (let minute = 0; minute < 60; minute += 15) {
                        let formattedHour = hour.toString().padStart(2, '0');
                        let  formattedMinute = minute.toString().padStart(2, '0');
                        let timeOption = formattedHour + ':' + formattedMinute;
                        let optionElement = document.createElement('option');
                        optionElement.value = timeOption;
                        optionElement.textContent = timeOption;
                        selectElement.appendChild(optionElement);
                    }
                }
            }

            // ドキュメントが読み込まれたときに、時間のオプションを追加
            document.addEventListener('DOMContentLoaded', function() {
                populateTimeSelect(timeInput);
            });
        </script>
    </form>
</body>
</html>

Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる