如何在选择未来日期时禁用 html 日期输入类型？答案

【问题标题】：How to disable html date input type in choosing future dates?如何在选择未来日期时禁用 html 日期输入类型？
【发布时间】：2016-04-07 05:45:44
【问题描述】：

我有一个代码，就在去年，它还在工作。它的作用是禁止用户选择未来的日期。现在是一月份，它似乎没有工作。我不理解为什么。请帮我解决这个问题。您的帮助将不胜感激。

这是输入：

<input id="reqDate" class="form-control col-md-7 col-xs-12" name="reqDate" required="required" type="date">

Javascript：

<script type="text/javascript">
          var input = document.getElementById("reqDate");
          var today = new Date();
          var day = today.getDate();

          // Set month to string to add leading 0
          var mon = new String(today.getMonth()+1); //January is 0!
          var yr = today.getFullYear();

            if(mon.length < 2) { mon = "0" + mon; }

            var date = new String( yr + '-' + mon + '-' + day );

          input.disabled = false; 
          input.setAttribute('max', date);
</script>

顺便说一句，我在 .php 文件中使用了这段代码。

【问题讨论】：

标签： javascript php html validation datepicker

【解决方案1】：

正如你所使用的，原生 input[type="date"] 元素支持最大日期值：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
http://www.w3schools.com/tags/att_input_max.asp

您用于设置日期的 JavaScript 不会将日期填零，因此对于 1 月 1 日，您会得到日期 max="2016-01-1"。为了与你的 JavaScript 版本保持一致，sero 使用以下内容填充日期：

<script>
      var input = document.getElementById("reqDate");
      var today = new Date();
      var day = today.getDate();

      // Set month to string to add leading 0
      var mon = new String(today.getMonth()+1); //January is 0!
      var yr = today.getFullYear();

        if(mon.length < 2) { mon = "0" + mon; }
        if(day.length < 2) { dayn = "0" + day; }

        var date = new String( yr + '-' + mon + '-' + day );

      input.disabled = false; 
      input.setAttribute('max', date);
</script>

这是一个 PHP 脚本，为了简化您可以使用的代码：

<input type="date" name="bday" max="<?=date('Y-m-d')?>">

注意对input[type="date"] 的支持因浏览器而异（请参阅http://caniuse.com/#feat=input-datetime）。

您可以通过在浏览器检查器中检查元素来确认使用的最大值是正确支持的 RCF3339 格式。

【讨论】：

您仍然需要验证日期是否在服务器端的范围内。 (1) 因为不是所有的浏览器都支持` ` 并且有些不支持max 属性。 (2) 因为作恶者可以提交他们想要的任何值。
<?= 相当于<?php echo，如果不支持短标签，您可能需要使用它。另外，永远不要相信用户输入，所以按照@JohnHascall 所说的在 PHP/服务器端验证数据。
max 属性已在 OP 共享的代码中使用/设置。
也许您也需要在天之前添加一个零，就像月份一样。您是否检查了在生成的 HTML 中实际添加到输入字段的值？
将var day = today.getDate(); 替换为var day = new String(today.getDate()); 然后if (day.length < 2) { day = "0" + day; } 将用于对当月的某一天进行零填充。

【解决方案2】：

您是否尝试在输入中使用 min 属性。在 html5 中，我们可以以正确的日期格式 YYYY-MM-DD 指定最小或最大属性

【讨论】：