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

Question

我只有一行简单的代码:

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

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

Answer 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演示

Answer 2

JavaScript只是简单的解决方案

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

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

Answer 3

代替Javascript,更短的基于PHP的解决方案可能是:

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

Answer 4

将需要Javascript; 例如:

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

JSFiddle演示

Answer 5

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

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

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

查看现场演示

Answer 6

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" />

Answer 7

我使用 Laravel 7.x 和刀片模板，我使用：

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

Answer 8

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

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

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

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