DatePicker - Date text disappears when using next/prev buttons

1 Answer 1305 Views

Date/Time Pickers

Anna asked on 31 Aug 2021, 03:13 PM

I'm using the 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 future date is selected from the calendar, and then one of the next/prev buttons are 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>

1 Answer, 1 is accepted

Accepted