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。

HTML日期选择器

1 个答案: