Calendar disable dates from next month

Question

I am using JQuery to block some dates but next month are available. A user can click on today day + 5 and all the other should be disabled. What I am doing wrong?

  <div id='datepicker' onchange="test(this)">
  </div>
        
    $('#datepicker').datepicker(
        {
            numberOfMonths: 2,
            beforeShowDay: function (date) {

              
                var hilight = [true, 'isActive'];
                var today = new Date();
                var blockdays = new Date();
               // var startdayofmonth = new Date(today.getFullYear(), today.getMonth(), 1);
                today.setDate(today.getDate() + 5);
                blockdays.setDate(blockdays.getDate() + 12);
                blockdays = moment(blockdays.toLocaleDateString(), 'MM.DD.YYYY').format('YYYY-DD-MM');
                var blockendofmonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);;
                blockendofmonth = moment(blockendofmonth.toLocaleDateString(), 'MM.DD.YYYY').format('YYYY-DD-MM');
                today = moment(today.toLocaleDateString(), 'MM.DD.YYYY').format('YYYY-DD-MM');
                date = moment(date.toLocaleDateString(), 'MM.DD.YYYY').format('YYYY-DD-MM');
               
              
             
                if (date < today) {
                    hilight = [false, ''];
                }
                else if (date >= blockdays) {
                    hilight = [false, ''];
                }

                return hilight;
            }
        }

    );

Answer 1

Comparing dates string in YYYY-DD-MM format gives incorrect results. '2021-10-04' < '2021-20-03' this evaluated to true ' which is actually not correct. When comparing date strings, it is better to follow YYYY-MM-DD:HH:MM:SS format for better result. Checkout below snippet.

 $(document).ready(function () { var allowDays = getAllowDays(); $('#datepicker').datepicker({ numberOfMonths: 2, beforeShowDay: function (date) { var hilight = [true, 'isActive']; var start = allowDays[0]; var end = allowDays[1]; var currentDate = +moment(date).format('YYYYMMDD'); if (currentDate < start) { hilight = [false, '']; } else if (currentDate >= end) { hilight = [false, '']; } return hilight; } }); }); function getAllowDays() { var today = new Date(); var blockdays = new Date(); today.setDate(today.getDate() + 5); blockdays.setDate(blockdays.getDate() + 12); return [+moment(today).format('YYYYMMDD'), +moment(blockdays).format('YYYYMMDD')]; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/> <div id='datepicker'></div>