Kendo DatePicker - 使用下一个/上一个按钮时日期文本消失答案

【问题标题】：Kendo DatePicker - Date text disappears when using next/prev buttonsKendo DatePicker - 使用下一个/上一个按钮时日期文本消失
【发布时间】：2023-03-11 20:50:01
【问题描述】：

我正在使用 Kendo DatePicker 小部件和一些下一个/上一个按钮来切换日期。我还在当前日期周围设置了一个两周的窗口。当您在窗口的任一端选择日期时，会相应地禁用下一个/上一个按钮。错误是 - 当从日历中选择未来日期，然后使用下一个/上一个按钮之一时，日期文本会消失。在第一次出现错误后，有时也会在以前的日期发生。下面是我的代码的一个工作示例。任何帮助表示赞赏！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  
    <button id="btnPrevDate" type="button">prev</button>

    <div class="demo-section k-content d-inline-block">
         <input id="scheduleDatePicker" title="datepicker" class="w-100" />
    </div>

    <button id="btnNextDate" type="button">next</button>

    <script>
        $(document).ready(function(){
             var currentDate = new Date();
             var selectedDate = new Date();
             var startDate = new Date();
             var endDate = new Date();

             selectedDate.setDate(currentDate.getDate());
             startDate.setDate(currentDate.getDate() - 7);
             endDate.setDate(currentDate.getDate() + 7);
          
             $("#scheduleDatePicker").kendoDatePicker({
                value: selectedDate,
            min: startDate,
            max: endDate,
            change: function (e) {
                    var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');

                    selectedDate.setDate(datepicker.value().getDate());

                    if (selectedDate.getDate() == endDate.getDate()) {
                         $('#btnNextDate').prop('disabled', true);
                     } else if (selectedDate.getDate() == startDate.getDate()) {
                         $('#btnPrevDate').prop('disabled', true);
                     }

                     if (selectedDate.getDate() != endDate.getDate()) {
                         $('#btnNextDate').prop('disabled', false);
                     }
                     if (selectedDate.getDate() != startDate.getDate()) {
                         $('#btnPrevDate').prop('disabled', false);
                     }

                }
             });
          
             $('#btnPrevDate').on('click', function () {
                var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
                selectedDate.setDate(selectedDate.getDate() - 1);
                datepicker.value(selectedDate);

                $('#btnNextDate').prop('disabled', false);

                if (selectedDate.getDate() == startDate.getDate()) {
                    $(this).prop('disabled', true);
                }

             });
    
             $('#btnNextDate').on('click', function () {
                var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
                selectedDate.setDate(selectedDate.getDate() + 1);
                datepicker.value(selectedDate);

                $('#btnPrevDate').prop('disabled', false);

                if (selectedDate.getDate() == endDate.getDate()) {
                    $(this).prop('disabled', true);
                }

             });
        });
    </script>
</body>
</html>

【问题讨论】：

标签： javascript jquery kendo-ui telerik kendo-datepicker

【解决方案1】：

问题在于更改功能。当我运行您的代码时，它从 2021 年 8 月 31 日开始。如果我随后打开日历并选择 2021 年 9 月 2 日，则此行

selectedDate.setDate(datepicker.value().getDate());

将 selectedDate 变量设为 2021 年 8 月 2 日。月份未得到调整。然后，当您使用 prev/next 时，该 selectedDate 变量会递增并应用于选择器，此时它会变为空白，因为它超出了允许的范围。

您的代码需要扩展以考虑月份和年份。

【讨论】：

您对月份设置不正确是对的，但即使我尝试明确设置它，它也是不正确的。查看我对原始帖子的更新。
啊，我刚刚意识到这实际上是正确的，因为月份计数从零开始。所以 8 是 9 月。修好了谢谢你的帮助！！