jquery UI 日历日期范围显示太多月份

问题描述 投票：0回答：1

我有 jquery UI 代码，我试图显示今年的 6 个月，从本月开始到接下来的 5 个月，所以总共 6 个月，但现在，它超出了这 6 个月，显示了太多几个月。

所以它可能有两个问题：

  1. 它显示了月份范围，但它显示了 6 个月的 6 倍，因此总共 6*6 = 36 个月，这是错误的。
  2. 当我单击下一个/上一个箭头时，它会显示 jquery UI 日历，而不是在日期之间导航。

这是下面的 y 代码以及 JSFiddle 链接

HTML优先

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date and Time Range Selector</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>
        .date-time-range-selector {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }
        .calendar-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .month-container {
            margin: 10px;
        }
        .time-slider {
            width: 200px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="date-time-range-selector">
        <label for="dateTimeRange">Select Date and Time Range:</label>
        <input type="text" id="dateTimeRange" readonly>
        <div id="calendar-popup" style="display: none;">
            <div class="calendar-container"></div>
        </div>
    </div>
    
</body>
</html>

这是 JS 代码

$(function() {
    const $input = $("#dateTimeRange");
    const $calendarPopup = $("#calendar-popup");
    const $calendarContainer = $calendarPopup.find(".calendar-container");
    
    let startDate, endDate, startTime, endTime;

    function updateInputValue() {
        if (startDate && endDate && startTime && endTime) {
            $input.val(`${startDate.toLocaleDateString()} ${startTime} - ${endDate.toLocaleDateString()} ${endTime}`);
        } else if (startDate && startTime) {
            $input.val(`${startDate.toLocaleDateString()} ${startTime} - Select end date`);
        } else {
            $input.val('');
        }
    }

    function createCalendar(date) {
        const $monthContainer = $("<div>").addClass("month-container");
        const $calendar = $("<div>").datepicker({
            defaultDate: date,
            numberOfMonths: [2,3],
            showOtherMonths: true,
            selectOtherMonths: true,
            beforeShowDay: function(date) {
                const isInRange = startDate && endDate && date >= startDate && date <= endDate;
                const isStart = startDate && date.getTime() === startDate.getTime();
                const isEnd = endDate && date.getTime() === endDate.getTime();
                let cssClass = '';
                if (isStart) cssClass = 'in-range';
                if (isEnd) cssClass = 'in-range';
                if (isInRange) cssClass = 'in-range';
                return [true, cssClass];
            },
            onSelect: function(selectedDate, instance) {
                const selected = new Date(instance.selectedYear, instance.selectedMonth, instance.selectedDay);
                if (!startDate || (startDate && endDate) || (startDate && selected < startDate)) {
                    startDate = selected;
                    endDate = null;
                    startTime = '00:00';
                    endTime = null;
                } else {
                    endDate = selected;
                    endTime = '23:59';
                }
                updateInputValue();
                $calendarContainer.find(".ui-datepicker").datepicker("refresh");
            }
        });
        
        const $timeSlider = $("<div>").addClass("time-slider").slider({
            range: true,
            min: 0,
            max: 1440,
            step: 15,
            values: [540, 1020], // 9:00 AM to 5:00 PM
            create: function() {
                const $handles = $(this).find('.ui-slider-handle');
                $handles.each(function(index) {
                    const $tooltip = $('<div class="ui-slider-tooltip">').appendTo(this);
                    $(this).data('tooltip', $tooltip);
                });
                updateTooltips($(this));
            },
            slide: function(event, ui) {
                startTime = minutesToTime(ui.values[0]);
                endTime = minutesToTime(ui.values[1]);
                updateInputValue();
                updateTooltips($(this));
            }
        });

        $monthContainer.append($calendar, $timeSlider);
        return $monthContainer;
    }

    function updateTooltips($slider) {
        const values = $slider.slider('values');
        $slider.find('.ui-slider-handle').each(function(index) {
            const $tooltip = $(this).data('tooltip');
            $tooltip.text(minutesToTime(values[index]));
        });
    }

    function minutesToTime(minutes) {
        const hours = Math.floor(minutes / 60);
        const mins = minutes % 60;
        return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
    }

    $input.on("click", function() {
        if ($calendarContainer.children().length === 0) {
            const today = new Date();
            const monthsToShow = 6;
            const startDateOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

            $calendarContainer.empty();

            for (let i = 0; i < monthsToShow; i++) {
                const date = new Date(startDateOfMonth.getFullYear(), startDateOfMonth.getMonth() + i, 1);
                const $monthContainer = createCalendar(date);
                $calendarContainer.append($monthContainer);

                const $calendar = $monthContainer.find(".ui-datepicker");

                // Attach event handlers manually
                $calendar.find(".ui-datepicker-prev, .ui-datepicker-next").off("click").on("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const isNext = $(this).hasClass("ui-datepicker-next");
                    $calendar.datepicker(isNext ? "nextMonth" : "prevMonth");
                });
            }
        }
        $calendarPopup.show();
    });

    $(document).on("click", function(event) {
        if (!$(event.target).closest(".date-time-range-selector").length && 
            !$(event.target).closest(".ui-datepicker-header").length) {
            $calendarPopup.hide();
        }
    });

    // Add clear button
    const $clearButton = $("<button>").text("Clear").click(function() {
        startDate = null;
        endDate = null;
        startTime = null;
        endTime = null;
        updateInputValue();
        $calendarContainer.find(".ui-datepicker").datepicker("refresh");
        $calendarPopup.hide();
    });
    $calendarPopup.append($clearButton);
});

这是 CSS 代码

.ui-datepicker .in-range a,
.ui-datepicker .range-start a,
.ui-datepicker .range-end a {
    background-color: #FF0000;
    color: #FFFFFF;
}

.ui-datepicker .range-start a,
.ui-datepicker .range-end a {
    font-weight: bold;
}

.ui-datepicker-other-month {
    visibility: visible;
}

.ui-datepicker-today {
    background: none !important;
}

现在这是我的小提琴

https://jsfiddle.net/c2twojve/

这是现在的图像

enter image description here

javascript jquery jquery-ui
1个回答
0
投票

您的 

numberOfMonths
设置错误，请将 
numberOfMonths
从 
[2,3]
更改为 
1
或 
[1,1]
，这样每个循环就会渲染一个月

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.