在輸入類型日期和內部旋轉箭頭中禁用過去的日期

Question

我使用以下腳本禁用了過去的日期。 但是我無法在內旋箭頭中禁用過去的日期。

許多搜索結果顯示僅隱藏內旋箭頭; 我不想隱藏內旋箭頭。 是否可以在內旋箭頭中禁用過去的日期？

 //disable past dates
 var today = new Date().toISOString().split('T')[0];
 document.getElementsByName("dateField")[0].setAttribute('min', today);

 //hide inner-spin arrows
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
 -webkit-appearance: none; margin:0;
 }

Answer 1

我認為其中一個問題是“什么是最好的行為”，它成為一種基於意見的理想。 那么，如果您將日期設置為今天之前的下一年，那么將年份更改為今年，其他部分應該怎樣做？ 這是基於意見的部分和您希望操縱的“行為模式”。 看來， 一旦焦點丟失 ，您需要手動操作日期 。

復制上述步驟的示例：

1. 設置日期最小/最大： <input id="when" type="date" min="2016-04-06" max="2099-12-31" />
2. 將年份更改為2017年
3. 將月份和日期都更改為01（2017年1月1日）
4. 使用微調器將年份更改為2016
5. 日期顯示為01/01/2016

您現在，根據您的設置設置了無效日期。 失去焦點后，您需要檢測到這一點，然后適當地管理該日期有效性問題 - 您會將其設置回第一個（最小）日期嗎？ 到下一年有那個作為有效日期？ 到那一天有效的下一個月？ 你看到這里的挑戰是任何這些可能是你想要的行為，但這可能不是我想要的行為（我們都有不同的意見）。

編輯：在輸入事件觸發器上設置為您的最小值：

var inputMyDate = document.querySelector('input#when');

inputMyDate.addEventListener('input', function() {
  var current = this.value;
  var min = input.getAttribute("min");
  if (new Date(current) < new Date(min)) {
    var setmin = new Date(min).toISOString().split('T')[0];
    this.value = setmin;
  }
});

Answer 2

此代碼可以幫助您：

<form action="demo_form.asp">
 Enter a date before 1980-01-01:
 <input type="date" name="bday" max="1979-12-31"><br>

 Enter a date after 2000-01-01:
 <input type="date" name="bday" min="2016-12-25"><br>

 Quantity (between 1 and 5):
 <input type="number" name="quantity" min="1" max="5"><br>

<input type="submit">
</form>