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

Question

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

一个常见的例子是选择日期范围,其中"from"日期应小于或等于"to"日期.以下将描述值之间的期望关系,如果只有您可以在语法中使用元素引用:

<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());
});

拨弄了。如果日期选择器的浏览器实现尊重范围限制（通过禁用所需范围之外的日期），则两者min都max可以应用于相应的字段以增强用户体验