时间戳

首页 > 解决方案 > HTML日期字段设置最大日期与JS

javascript - HTML日期字段设置最大日期与JS

问题描述

在带有 ID 的表单字段中输入第一个日期dateInput并运行该函数时showEndDate，inputDate + 21 days成功输出到控制台，但在带有 ID 的表单字段上没有设置最大值end_date。我使用setAttribute("max", inputDate). _ ?

我已经测试过输入一个固定值，例如setAttribute("max", '2021-10-31')，这在10 月 31 日有效，确实被正确设置为日期字段中的上最大值！:( :S

// Declare values for use in functions
    let dateInput = document.getElementById("dateInput");
    var endDateInput = document.getElementById("end_date");

// Shows the end date field
    function showEndDate() {
      var inputValue = dateInput.value;
      var inputDate = new Date(inputValue);
      if(inputValue != "") {
        document.getElementById("panel").style.display = "block";
      } else {
        alert("Date cannot be blank");
      }
      inputDate.setDate(inputDate.getDate() + 21);
      console.log(inputDate);
      endDateInput.setAttribute("max", inputDate);
    }

<input id="dateInput" type="date" name="manufacture_one" required ></div>

还有结束日期：

<input id="end_date" type="date" name="holiday_end_date" >

标签： javascriptforms

解决方案

inputDate是 a Date，但属性值是字符串。因此，使用默认方法将日期转换为字符串toString，该方法不提供max属性预期格式的日期。

您需要明确格式化它。有很多方法可以做到这一点，其中之一（如果你想要 UTC 的日期 [是的，即使只是没有时间的日期也很重要]）是inputDate.toString().substring(0, 10). 但同样，那将是 UTC。如果您想要当地时间，则必须以另一种方式对其进行格式化。SO（例如这里）和网络上有很多格式化日期的例子。

推荐阅读