设置type=’date’的input标签不能选择大于当前时间的日期

近期项目中有一个用户信息收集的表格，其中有一项是出生“年月日”。在页面上写了H5的input标签type='date'。

<input type="date" placeholder="请输入出生年月日" id="birthday" value="" max="">
复制代码

此时，用户是可以选择当前日期后面的日期，显然这是不合理的。于是我给input标签设置了日期最大值(max)。设置的脚本如下：

let dateNow = new Date(),
    yearNow = dateNow.getFullYear(),
    monthNow = dateNow.getMonth() + 1,
    dayNow = dateNow.getDate(),
    maxDate = yearNow + '-' + monthNow + '-' + dayNow;
let inp = document.querySelector('#birthday');
inp.setAttribute('max', maxDate);
复制代码

设置了但实际上并没有生效。原来是设置最大值需要符合YYYY-MM-DD的时间格式，以上方法处理日期时，如果月和日是一位数，会是'2021-7-6'这种格式，因此需要在一位数的月和日前添加0。

给日期补 0，最常用的方法如下：

function addZero(n) {
    return parseInt(n) >= 10 ? n.toString() : '0' + n;
}
复制代码

使用到上面的脚本中，就是：

let dateNow = new Date(),
    yearNow = dateNow.getFullYear(),
    monthNow = dateNow.getMonth() + 1,
    dayNow = dateNow.getDate(),
    maxDate = yearNow + '-' + addZero(monthNow) + '-' + addZero(dayNow);
let inp = document.querySelector('#birthday');
inp.setAttribute('max', maxDate);
复制代码

另外在String.prototype上有一个padStart方法，可以从当前字符串的左侧开始，用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。其语法如下：

str.padStart(targetLength [, padString])
复制代码

targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

padString：可选。填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 ” “。
使用示例如下：

'TestString'.padStart(16); // "      TestString"
'TestString'.padStart(16, "xoo");  // "xooxooTestString"
'TestString'.padStart(16,"12345678"); // "123456TestString"
'TestString'.padStart(16, "0");     // "000000TestString"
'TestString'.padStart(6);   // "TestString"
复制代码

使用padStart给日期补0的脚本如下：

let dateNow = new Date(),
    yearNow = dateNow.getFullYear(),
    monthNow = dateNow.getMonth() + 1,
    dayNow = dateNow.getDate(),
    maxDate = yearNow + '-' + (monthNow).toString().padStart(2, '0') + '-' + dayNow.toString().padStart(2, '0'),
let inp = document.querySelector('#birthday');
inp.setAttribute('max', maxDate);
复制代码

这样就给input标签添加了一个动态的 max 属性。