Jquery Ui Datepicker - Range control

Control what dates are selectable in the second input of a range jquery datepicker.

HTML

<div class="demo"> 
 
<label for="from">From</label> 
<input type="text" id="from" name="from"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to"/> 
 
</div>

JavaScript

$(function() {
                     
        $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            
            onSelect: function( selectedDate ) {
                if(this.id == 'from'){
                  var dateMin = $('#from').datepicker("getDate");
                  alert(dateMin);
                  var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() );
                  alert(rMin);
                  var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() +30);
                  alert(rMax);
                  
                  var cdate=new Date();
                  const formattedDate = cdate.toLocaleDateString('en-GB', {
  day: 'numeric', month: 'short', year: 'numeric'
}).replace(/ /g, '-');
const dformattedDate = dateMin.toLocaleDateString('en-GB', {
  day: 'numeric', month: 'short', year: 'numeric'
}).replace(/ /g, '-');
                  alert(formattedDate+" "+dformattedDate);
                  if(formattedDate==dformattedDate)
                  {
                  alert(formattedDate+" OK  "+dformattedDate);
                   $('#to').datepicker("option","minDate",rMin);
                  $('#to').datepicker("option","maxDate",rMin); 
                  }
                  else
                  {
                  $('#to').datepicker("option","minDate",rMin);
                  $('#to').datepicker("option","maxDate",rMax); 
                  }
                }
                
            }
        });
    });