Kendo DatePicker - 使用 next/prev 按钮时日期文本消失

Question

我将 Kendo DatePicker 小部件与一些 next/prev 按钮结合使用来切换日期。我还在当前日期前后设置了两周 window。当您在 window 的任一端 select 一个日期时，next/prev 按钮将相应地禁用。错误是 - 当从日历中 select 编辑未来日期，然后使用 next/prev 按钮之一时，日期文本消失。在第一次出现错误后，它有时也会在以前的日期发生。下面是我的代码的一个工作示例。感谢您的帮助！

<!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>

Answer 1

问题出在更改函数中。当我运行你的代码时，它从 2021 年 8 月 31 日开始。如果我然后打开日历并选择 2021 年 9 月 2 日，这一行

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

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

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

Kendo DatePicker - 使用 next/prev 按钮时日期文本消失

Kendo DatePicker - Date text disappears when using next/prev buttons

javascript

jquery

telerik

kendo-ui

kendo-datepicker