将日期输入字段的最大日期设置为今天答案

【问题标题】：Set date input field's max date to today将日期输入字段的最大日期设置为今天
【发布时间】：2015-11-29 11:06:57
【问题描述】：

我只有这样简单的一行代码：

<input type='date' min='1899-01-01' max='2000-01-01'></input>

有没有一种简单的方法可以将最大日期设置为“今天”而不是 2000-01-01？还是我必须使用 Javascript 来执行此操作？

【问题讨论】：

标签： html

【解决方案1】：

您将需要 Javascript 来执行此操作：

HTML

<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>

JS

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
   dd = '0' + dd;
}

if (mm < 10) {
   mm = '0' + mm;
} 
    
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("datefield").setAttribute("max", today);

JSFiddle demo

【讨论】：

完美运行.. 希望 HTML5 原生提供这样的功能或更灵活的日期格式选项
除了前端状态，根据情况你可能还需要服务器端验证。
嗯，我正在尝试这个，它不会设置最大日期。它仍然让我选择最大值之外的日期，例如如果今天是 10 月 25 日，它让我选择 26 日、27 日、28 日等。有人知道为什么吗？
感谢您的解决方案，如何避免用户写入不允许的日期，实际上在选择日期时使用此解决方案是正确的规则，但允许写入限制的不同日期
“输入”元素是自动关闭的。 <input id="datefield" type='date' min='1899-01-01' max='2000-13-13' />.

【解决方案2】：

仅 JavaScript 的简单解决方案

datePickerId.max = new Date().toISOString().split("T")[0];

&lt;input type="date" id="datePickerId" /&gt;

// below trick also works! Thanks jymbob for the comment.
datePickerId.max = new Date().toLocaleDateString('en-ca')

【讨论】：

@BrandenBarber 甚至 type="date" 都没有工作
看来max iOS Safari 目前不支持它。在此处查看有关此caniuse.com/#search=input%20date 的更新
感谢您的解决方案，如何避免用户写入不允许的日期，实际上在选择日期时使用此解决方案是正确的规则，但允许写入限制的不同日期
@EdwinVasquez 将在提交表单时进行验证。试试<form> <input type="date" max='2020-12-15' id="dt" required /><input type="submit" value="Submit" /></form>
感谢北美的乐于助人的人们：today = new Date().toLocaleDateString('en-ca') - 当ISOString() 被解析为 UTC 时，避免了奇怪的一对一问题

【解决方案3】：

代替 Javascript，一个更短的基于 PHP 的解决方案可能是：

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

【讨论】：

您应该使用适当的模板系统，而不是混合使用 HTML 和 PHP 代码。
@bfontaine 显然你没有使用 php，因为其中 html 和 php 是混合的
@Pulkit 你可以并不意味着你应该。
@bfontaine 混合是一种选择，有些人喜欢啤酒，有些人喜欢鸡尾酒，这个例子很棒，并且可以节省使用 js 或其他任何例子的操作：
@bfontaine 解决方案在产生另一个问题时会变得很糟糕，我认为这不会导致任何问题，通常将 php 和 HTML 混合在同一个文件中根本不是问题。

【解决方案4】：

需要Javascript；例如：

$(function(){
    $('[type="date"]').prop('max', function(){
        return new Date().toJSON().split('T')[0];
    });
});

JSFiddle demo

【讨论】：

和 jquery aparrantly
这就是为什么我的解决方案不是那么好。但问题仍然是为什么我们不能在不涉及任何 JS 的情况下原生地做到这一点

【解决方案5】：

toISOString() 将给出当前的 UTC 日期。因此，要获取当前本地时间，我们必须获取 getTimezoneOffset() 并从当前时间中减去它

document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];

&lt;input type="date" min='1899-01-01' id="dt" /&gt;

【讨论】：

感谢您的解决方案，如何避免用户写入不允许的日期，实际上在选择日期时使用此解决方案是正确的规则，但允许写入限制的不同日期

【解决方案6】：

我正在使用带有刀片模板的 Laravel 7.x，并且我使用：

<input ... max="{{ now()->toDateString('Y-m-d') }}">

【讨论】：

在我的情况下它不起作用，也许，也可以使用这个date('Y-m-d', strtotime($yourVariable))
如果有人只需要 js 怎么办。 Ans 超出特定问题的范围
请阅读问题“有没有一种简单的方法可以将最大日期设置为“今天”而不是 2000-01-01？或者我必须使用 Javascript 来执行此操作吗？”它是关于 JS 之外的另一种方式。

【解决方案7】：

是的，也不是。 HTML 5 中有 min 和 max 属性，但是

max 属性不适用于 Internet Explorer 10+ 或 Firefox 中的日期和时间，因为 IE 10+ 和 Firefox 不支持这些输入类型。

编辑：Firefox now does support it

因此，如果您对该属性的文档感到困惑，但它不起作用，那就是原因。
有关版本，请参阅 W3 page。

我发现使用 Javascript 最简单，因为其他答案说，因为您可以只使用预制模块。此外，许多 Javascript 日期选择器库都有最小/最大设置，并具有漂亮的日历外观。

【讨论】：

【解决方案8】：

.split("T")[0] 的替代方案，无需在内存中创建字符串数组，使用String.slice()：

new Date().toISOString().slice(0, -14)

datePickerId.max = new Date().toISOString().slice(0, -14);

&lt;input type="date" id="datePickerId" /&gt;

【讨论】：

【解决方案9】：

您是否不想使用外部脚本，而是在 HTML 输入元素中设置max 限制，内联如下：

<input type="date" max="3000-01-01" onfocus="this.max=new Date().toISOString().split('T')[0]" />

我故意添加了max 属性和一个遥远的未来，因为一旦设置了max 属性，Chrome 浏览器似乎会更改字段的宽度，所以为了避免这种情况，我预先设置了它-设置。

See live demo

【讨论】：

我认为最好的解决方案，谢谢 vsync，如果有人像我一样试图阻止过去的日期，试试这个<input type="date" min="2050-01-01" onfocus="this.min=new Date().toISOString().split('T')[0]" />

【解决方案10】：

它可能很有用：如果你想用 Symfony 表单来做：

 $today = new DateTime('now');
 $formBuilder->add('startDate', DateType::class, array(
                   'widget' => 'single_text',
                   'data'   => new \DateTime(),
                   'attr'   => ['min' => $today->format('Y-m-d')]
                   ));

【讨论】：

为这样的基本需求引入 Symfony 看起来有点奇怪
好的，事实上我是从谷歌来的，我的搜索中有“symfony”，所以我认为它可以提供帮助

【解决方案11】：

先前答案之一的简短但可能不太可读的版本。

   <script type="text/javascript">
    $(document).ready(DOM_Load);

    function DOM_Load (e) {
        $("#datefield").on("click", dateOfBirth_Click);
    }

    function dateOfBirth_Click(e) {
        let today = new Date();
        $("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
    }

</script>

【讨论】：

【解决方案12】：

jQuery 和 JavaScript 示例：

$('#arrival_date').attr('min', new Date().toISOString().split('T')[0])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">

document.getElementById('arrival_date').setAttribute('min', new Date().toISOString().split('T')[0])

&lt;input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="..."&gt;

【讨论】：

【解决方案13】：

模板：`ejs`

使用Node.js、express.js和模板系统ejs：

<input id="picOfDayDate" type="date"  name="date-today"
    value="<%= new Date().toISOString().split("T")[0] %>" 
    min='1995-06-16' 
    max="<%= new Date().toISOString().split("T")[0] %>" 
    class="datepicker" 
>

【讨论】：

【解决方案14】：

我也有同样的问题。我通过这种方式构建它。我使用了 struts 2 框架。

  <script type="text/javascript">

  $(document).ready(function () {
  var year = (new Date).getFullYear();
  $( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate: 
  0});

  });


  </script>

        <s:textfield name="effectiveDate" cssClass="input-large" 
   key="label.warrantRateMappingToPropertyTypeForm.effectiveDate" 
   id="effectiveDateId" required="true"/>

这对我有用。

【讨论】：

模板：ejs

模板：`ejs`