javascript - HTML 日期选择器

Question

我目前正在使用 HTML 表单的日期输入；

Expiry Date: <input type="date" name="expire" title="Please enter expiry date" required/>

它用于客户端网站。由此，我如何才能使用户只能选择当前日期之后的天数？我不想在日期中编码，我希望它能够检测到日期(如果可能的话)？

Answer 1

<input type="date" />元素有 min和max可用于指定可选的最小和最大日期范围的属性。该值必须以 ISO-8601 格式指定 ( yyyy-MM-dd ):

<input type="date" min="2016-10-01" max="2017-01-01" />

似乎没有一个神奇值，例如 "today" ，因此您必须在服务器端或使用 JavaScript 设置该值:

window.addEventListener('DOMContentLoaded', restrictDateInputs );

function restrictDateInputs(e) {
    var today = ( new Date() ).toISOString().substring( 10 );
    var inputs = document.querySelectorAll('input[type=date].minToday');
    for( var i = 0; i < inputs.length; i++ ) {
        inputs[i].min = today;
    }
}

上面的代码设置了min所有日期输入的页面加载属性值 class="minToday" 。根据您的要求进行调整。

请记住，客户端逻辑不会保证无效数据不会发送到任何数据处理代码(客户端或服务器端)，因此请始终(按顺序)清理、验证和验证任何输入您从用户处收到。

请注意<input type="date" />仍然没有得到所有桌面浏览器的完全支持，特别是 Internet Explorer 11 甚至最新版本的 Firefox。