彈框

佬zz發表於2024-07-23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="date-dropdown"></select>
<div>
    <label for="start-time">開始時間:</label>
    <select id="start-time"></select>
</div>
<div>
    <label for="end-time">結束時間:</label>
    <select id="end-time"></select>
</div>
<script>
    $(document).ready(function() {
        function generateTimeOptions() {
            var $startTimePicker = $('#start-time');
            var $endTimePicker = $('#end-time');

            $startTimePicker.empty(); // 清空開始時間下拉選單
            $endTimePicker.empty(); // 清空結束時間下拉選單

            // 時間範圍
            var startTime = new Date();
            startTime.setHours(8, 0, 0, 0); // 設定開始時間為 08:00

            var endTime = new Date();
            endTime.setHours(21, 0, 0, 0); // 設定結束時間為 21:00

            // 以 30 分鐘為間隔生成時間選項
            while (startTime <= endTime) {
                var hours = ('0' + startTime.getHours()).slice(-2);
                var minutes = ('0' + startTime.getMinutes()).slice(-2);

                var optionText = hours + ':' + minutes;
                var optionValue = hours + ':' + minutes;

                $startTimePicker.append($('<option></option>').attr('value', optionValue).text(optionText));
                $endTimePicker.append($('<option></option>').attr('value', optionValue).text(optionText));

                // 增加 30 分鐘
                startTime.setMinutes(startTime.getMinutes() + 30);
            }

            // 確保結束時間大於開始時間
            $startTimePicker.change(function() {
                var startTimeValue = $(this).val();
                var startDate = new Date('1970-01-01T' + startTimeValue + ':00');
                var endTimeOptions = $endTimePicker.find('option');

                endTimeOptions.each(function() {
                    var endTimeValue = $(this).val();
                    var endDate = new Date('1970-01-01T' + endTimeValue + ':00');
                    if (endDate <= startDate) {
                        $(this).hide(); // 隱藏不符合條件的結束時間選項
                    } else {
                        $(this).show(); // 顯示符合條件的結束時間選項
                    }
                });
            });

            // 初始化結束時間選擇器的選項
            $('#start-time').trigger('change');
        }

        function getWeekdayName(date) {
            const weekdays = ['週日', '週一', '週二', '週三', '週四', '週五', '週六'];
            return weekdays[date.getDay()];
        }

        function getFormattedDate(date) {
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            return month + '-' + day;
        }

        function populateDropdown() {
            var $dropdown = $('#date-dropdown');
            $dropdown.empty(); // 清空下拉選單

            for (var i = 0; i < 7; i++) {
                var date = new Date();
                date.setDate(date.getDate() + i);

                var weekdayName = getWeekdayName(date);
                var formattedDate = getFormattedDate(date);

                var optionText = weekdayName + ' ' + formattedDate;
                var optionValue = weekdayName + ' ' + formattedDate;

                $dropdown.append($('<option></option>').attr('value', optionValue).text(optionText));
            }
        }

        populateDropdown();
        generateTimeOptions();
    });
</script>
</body>
</html>

相關文章