Obtengo la fecha de hoy en la columna de fecha de recogida usando html y js. html
<label for="inputState" class="form-label">Date</label> <input type="date" id="PickUpDate" class="form-select">js
<script> var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear(); if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } PickUpDate = yyyy + '-' + mm + '-' + dd; document.getElementById("PickUpDate").setAttribute("min", PickUpDate); </script>Quiero crear otro campo DropOffDate y recibir información del usuario. Pero quiero habilitar las fechas después de 2 días de la fecha de recogida. ¿Cómo puedo implementar eso usando html y javascript? Estoy usando esto en una aplicación central de asp.net.
¿Es este el tipo de cosa que estabas tratando de implementar? Establezca el estado inicial del elemento de fecha de dropoffdate y luego asigne un detector de eventos al elemento de recogida; cuando haya un cambio, edite el valor y los atributos de entrega según sus necesidades.
const pad=function(i) { return ( parseInt(i)<10 ) ? '0' + parseInt(i) : parseInt(i); }; var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear(); PickUpDate = yyyy + '-' + pad(mm) + '-' + pad(dd); document.getElementById("PickUpDate").setAttribute("min", PickUpDate); // set initial minimum date for dropoff DropOffDate = yyyy + '-' + pad(mm) + '-' + pad( dd + 2 ); document.getElementById("DropOffDate").setAttribute("min", DropOffDate); // add event listener to the pickup - change properties & value of droppoff // when this changes. document.getElementById("PickUpDate").addEventListener('change',function(e){ let dropoff=new Date( this.value ); dropoff.setDate( dropoff.getDate() + 2 ); dropoff=[ dropoff.getFullYear(), pad( dropoff.getMonth() + 1 ), pad( dropoff.getDate() ) ].join('-'); let input=document.getElementById("DropOffDate"); input.setAttribute('min', dropoff ); input.value=dropoff; }); label{display:block;padding:0.25rem;margin:1rem;width:50%;} label input{float:right} <label for="inputState" class="form-label"> Pick-Up Date <input type="date" id="PickUpDate" class="form-select" /> </label> <label for="inputState" class="form-label"> Drop-Off Date <input type="date" id="DropOffDate" class="form-select" /> </label>Podría asignar el atributo min en el cambio de fecha, por ejemplo
const pickUpDate = document.getElementById('pickUpDate'), dropOffDate = document.getElementById('dropOffDate'); pickUpDate.onchange = function() { const date = this.valueAsDate; date.setDate(date.getDate() + 2); dropOffDate.min = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) + '-' + date.getDate().toString().padStart(2, 0); }; <input type="date" id="pickUpDate" /> <input type="date" id="dropOffDate" />