I am working with an online gift shopping website. On the single product page, I have a datepicker option by which the customer can select the delivery date of their selected product.

On clicking the datepicker button, I want to show a modal in which the calendar is displayed. And on selecting the date in the calendar, it will be displayed in the earliest delivery datepicker text box.

Also I need to disable the dates of the calendar up to today. Only the dates after today is to be displayed.

This is my script:

 $(document).on('focus', '.delivery-date', function(){ 
    var days_disabled   =   $(this).find('.earliest_delivery_days').val();  //No.of days to be disabled in the calendar
    $(this).find(".earliest_delivery").datepicker({ 
      minDate:days_disabled,            
      dateFormat: 'dd MM yy'                    
    });
  });  
  $(document).on('click', '.calendar', function(){
    $('.expect').text('Expected Delivery');
$('.earliest_delivery').datepicker('show');
});

This is my HTML :

<div class="delivery-date" id="delivery-date">
            <div class='date_expected' id='date_expected'>
              <input type='hidden' class='earliest_delivery_days' id='days_disabled' value=''>
              <p class='ci-desc expect'>Earliest Delivery Date</p>              
              <input type='text' class='date-select earliest_delivery' id='earliest_delivery' value='29-Jan-2022' readonly>
            </div>                  
                      
            <input type='button' class='deldate_box calendar' id='delivery_datepicker' value='CHANGE DATE'>       
          </div>