如何在html（输入类型日期）和带有条件的javascript中设置日期？

Question

我使用html和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>

我想创建另一个字段DropOffDate并从用户那里获取输入。但我想启用pickupdate 2天后的日期。如何使用html和javascript实现这一点。我正在asp中使用此功能。net核心应用程序。

Answer 1

例如，您可以在日期更改时分配min属性

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" />

Answer 2

这就是你想要实现的事情吗？设置衰减日期元素的初始状态，然后将事件侦听器分配给拾取元素-当发生更改时，您可以根据需要编辑衰减值和属性。

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>