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

Question

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

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

有没有一种简单的方法将最大日期设置为“今天”，而不是2000-01-01？还是我必须使用JavaScript来实现这个功能？

- Jack Johnson

Answer 1

JavaScript仅简单解决方案

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

<input type="date" id="datePickerId" />

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

- TRiNE

---

似乎 max 目前在iOS Safari上不受支持。 点击此处查看有关此问题的更新：https://caniuse.com/#search=input%20date - Branden Barber

感谢北美的热心人士：today = new Date().toLocaleDateString('en-ca') - 避免了在将 ISOString() 解析为 UTC 时出现奇怪的偏移问题。 - jymbob

@jymbob 谢谢！这对于每个具有时区偏移量的用户/浏览器都非常有帮助（不仅限于北美）。 并不是因为'en-ca'部分与时区有关（这是由于toLocaleDateString方法），而是恰好'en-ca'语言环境以输入字段所需的确切方式显示日期（YYY-MM-DD）。因此，对于世界上任何其他时区，您都应该使用'en-ca'作为语言环境！ - Arno van Oordt

回复我在2021年的评论：从Chrome 110开始，en-ca不再提供符合ISO标准的日期格式，而是返回标准的北美m/d/y格式。fr-ca仍然是yyyy-mm-dd。 - jymbob

@jymbob 谢谢您保持更新。我已编辑答案。 - TRiNE

Answer 2

你需要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 演示

- Shrinivas Pai

---

完美运行。希望 HTML5 原生提供这样的功能或更灵活的日期格式选项。 - exexzian

除了前端状态之外，根据情况，您可能还需要服务器端验证。 - Dirk Jan

嗯，我正在尝试这个，但它不会设置最大日期... 它仍然允许我选择超出最大日期的日期，例如如果今天是10月25日，它会让我选择26日、27日、28日等。有人知道为什么吗？ - Momoro

感谢您提供的解决方案。请问如何避免用户输入不允许的日期？实际上，使用这个解决方案可以正确地选择日期，但是允许输入受限制之外的日期。 - Edwin Vasquez

“input”元素应该是自闭合的。<input id="datefield" type='date' min='1899-01-01' max='2000-13-13' />。 - Rick Mac Gillis

不知道我使用的是哪个版本，但如果它不是 yyyy-MM-ddTHH:mm 格式，它就会被忽略。只需更改为：today = yyyy+'-'+mm+'-'+dd+'T00:00'; 就可以解决问题。 - Wayne Evans

Answer 3

如果不想使用Javascript，一个更短的基于PHP的解决方案可以是：

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

- rauf

---

你应该使用适当的模板系统，而不是混合HTML和PHP代码。 - bfontaine

@bfontaine 显然你还没有使用过PHP，因为在PHP中HTML和PHP是混合在一起的。 - Pulkit

@Pulkit 能做并不意味着你应该这么做。 - bfontaine

@bfontaine 混合是一种选择，有些人喜欢啤酒，有些人喜欢鸡尾酒，这个例子很棒，可以省去使用js或其他操作的步骤。 - talsibony

在@bfontaine的解决方案中，当它创建另一个问题时就变得糟糕了，但我不认为这会以任何方式引起问题。通常在同一文件中混合使用PHP和HTML并不是问题。 - talsibony

Answer 4

需要使用JavaScript；例如：

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

JSFiddle演示

- vmkcom

---

而且显然是jQuery。 - Alexander Derck

这就是为什么我的解决方案并不是那么好。但问题仍然是，为什么我们不能原生地做到这一点，而不涉及任何JS呢？ - vmkcom

Answer 5

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

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

<input type="date" min='1899-01-01' id="dt" />

- jafarbtech

---

感谢您提供的解决方案。请问如何避免用户输入不允许的日期？实际上，使用这个解决方案可以正确地选择日期，但是仍然允许输入受限制的日期。 - Edwin Vasquez

Answer 6

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

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

我已经故意添加了一个日期很远的max属性，因为Chrome浏览器似乎会在设置了max属性后改变字段的宽度，所以为了避免这种情况，我预先设置了它。

查看实时演示

- vsync

---

我认为这是最好的解决方案，感谢vsync。如果有人像我一样想要屏蔽过去的日期，请尝试使用以下代码：<input type="date" min="2050-01-01" onfocus="this.min=new Date().toISOString().split('T')[0]" /> - EKrol

如果我想选择最近的40天怎么办？ - greenridinghood

这个主题是关于单个日期选择，而不是一段日期范围的选择。如果要选择一个范围，您需要两个日期输入和一种可视化的方式来选择一个范围，最终会填充这两个字段的值。 - vsync

Answer 7

我正在使用Laravel 7.x版本，采用blade模板，并使用以下代码：

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

- Strabek

---

在我的情况下它没有起作用，也许你可以尝试使用这个date('Y-m-d', strtotime($yourVariable))。 - Ismynr

如果有人只需要 JavaScript 版本，那么答案超出了特定问题的范围。 - dipenparmar12

请阅读以下问题：“是否有一种简单的方法将最大日期设置为“今天”，而不是2000-01-01？或者我必须使用JavaScript来完成这个任务？” 这是关于除了JS之外的另一种方法。 - Strabek

Answer 8

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

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

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

<input type="date" id="datePickerId" />

- T J

Answer 9

是的和不是。HTML5中有最小和最大属性，但

由于IE 10+和Firefox不支持这些输入类型，因此对于日期和时间，最大属性在Internet Explorer 10+或Firefox中无法使用。

编辑: 现在Firefox支持它

所以如果您被该属性的文档混淆了，然而它不起作用，那就是为什么。
请参阅W3页面以获取版本信息。

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

- C.C.

Answer 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')]
                   ));

- Guillaume Harari

---

介绍Symfony给这样一个基本的需求看起来有点奇怪。 - Nico Haase

好的，实际上我是从谷歌来的，我的搜索结果中有“Symfony”，所以我认为它可能会有所帮助。 - Guillaume Harari