javascript - 如何使用 HTML5 来验证日期范围？

Question

或者，是否可以使用 html5 验证另一个字段的值？

一个常见的例子是选择一个日期范围，其中“开始”日期应小于或等于“结束”日期。如果您可以在语法中使用元素引用，以下内容将描述值之间所需的关系:

<input type="date" name="from" max="to">    //todo: populate with ~to.value
<input type="date" name="to" min="from">    //todo: populate with ~from.value

Answer 1

可以利用 html5 验证机制和一些 javascript 来动态更新 min/max 属性:

//in this case a single input restriction is sufficient to validate the form:

$('#from, #to').on('change', function(){
    $('#to').attr('min', $('#from').val());
});

Fiddled .如果日期选择器的浏览器实现遵守范围限制(通过禁用所需范围之外的日期)，则 min 和 max 都可以应用于相应的字段以增强用户体验