javascriptjquerykendo-uitelerikkendo-datepicker

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

I'm using the Kendo DatePicker widget in conjunction with some next/prev buttons for switching the dates. I'm also setting a two-week window around the current date. The next/prev buttons are disabled accordingly when you select a date at either end of the window. The bug is - when a future date is selected from the calendar, and then one of the next/prev buttons is used, the date text disappears. And after the first time the bug occurs, it will sometimes happen for previous dates too. Below is a working example of my code. Any help is appreciated!

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

Solution

  • The problem is within the change function. When I run your code, it starts on Aug 31 2021. If I then open the calendar and choose Sep 2 2021, this line

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

    makes the selectedDate variable Aug 2 2021. The month isn't getting adjusted. When you then use prev/next, that selectedDate variable gets incremented and applied to the picker at which point it goes blank because it's out of the allowed range.

    Your code needs to be extended to consider the month and year.