Estoy trabajando con un sitio web de compras de regalos en línea. En la página de un solo producto, tengo una opción de selección de fechas mediante la cual el cliente puede seleccionar la fecha de entrega del producto seleccionado.

Al hacer clic en el botón selector de fecha, quiero mostrar un modal en el que se muestra el calendario. Y al seleccionar la fecha en el calendario, se mostrará en el cuadro de texto del selector de fecha de entrega más temprana.

También necesito deshabilitar las fechas del calendario hasta hoy. Solo se mostrarán las fechas posteriores a hoy.

Este es mi guion:

 $(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'); });

Este es mi 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>