如何在 html（输入类型日期）和 javascript 中设置日期？答案

【问题标题】：How to set date in html (input type date) and javascript with conditions?如何在 html（输入类型日期）和 javascript 中设置日期？
【发布时间】：2021-10-06 07:10:08
【问题描述】：

我使用 html 和 js 在取货日期列中获取今天的日期。 html

<label for="inputState" class="form-label">Date</label>
<input type="date" id="PickUpDate" class="form-select">

<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 核心应用程序中使用它。

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

标签： javascript html

【解决方案1】：

这是您试图实现的那种东西吗？设置 dropoffdate 元素的初始状态，然后将事件侦听器分配给拾取元素 - 当发生更改时，您可以根据需要编辑丢弃值和属性。

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>

【讨论】：

【解决方案2】：

例如，您可以在日期更改时分配 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" />

【讨论】：