如何使用HTML5来验证日期范围？ [英] How to use HTML5 to validate a date range?

问题描述

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

常见示例是选择日期范围，其中从日期应该小于或等于到日期。如果您只能在语法中使用元素引用，那么下面将描述这些值之间的期望关系：

 < input type = datename =frommax =to> // todo：用〜to.value填充
< input type =datename =tomin =from> // todo：用〜from.value填充
  

解决方案

， Web组件非常有用，但是它们尚未在所有浏览器中得到完全支持。

这个想法是创建一个简单的html元素，包含两个子元素（from和to），如下所示：

 < div id =fromToDate> 
< div>< / div> 
< div>< / div> 
< / div> 
  

然后创建一个模板，该模板定义日期选择器的外观：

 < template id =fromToDateTemplate> 
< label for =fromDate>从< / label> 
< input type =dateclass =fromDateselect =：firstrequired =/> 
< label for =toDate>转换为< / label> 
< input type =dateclass =toDateselect =：lastrequired =/> 
< / template> 
  

select参数定义，其中值取自所以第一个输入字段取第一个div #fromToDate。

最后，我们必须填充影子根并定义逻辑：

  var shadow = document.querySelector（'from from #Date'）。 
 shadow.appendChild（template.content）; 
 
 
 $ b shadow.querySelector（。fromDate）。addEventListener（change，function（e）{
 var to = this.value; 
 
 shadow.querySelector（。toDate）。setAttribute（min，this.value）; 
}）; 
 
 template.remove（）; 
  

最后，两个输入字段将呈现，并且在第一个日期选择器中选择日期时，第二个日期选择器不能选择任何较低的数据。

提琴手例子： http：
$ b

优点：$ b​​
$ b

• 构建为小部件


• 易于重复使用


• 不会中断页面​​


• / li>
  

缺点：$ b​​
$ b

• 全部不支持浏览器尚未
  

未来阅读：

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/


• http：// www .html5rocks.com / zh / tutorials / webcomponents / shadowdom-201 /


• https：//dvcs.w3。 org / hg / webcomponents / raw-file / tip / explainer / index.html

Alternatively, is it possible to validate against another field's value with html5?

A common example would be selecting a date range where "from" date should be less than or equal to "to" date. The following would described the desired relationship between the values, if only you could use element references in syntax:

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

解决方案

Here, Web Components are very useful, however they are not full supported in all browsers yet .

The idea is to create a simple html Element, with two children (from and to) as the following:

<div id="fromToDate">
    <div></div>
    <div></div>
</div>

then create a template, which defines how the date picker should look:

<template id="fromToDateTemplate">
    <label for="fromDate">from</label>
    <input type="date" class="fromDate" select=":first" required="" />
    <label for="toDate">to</label>
    <input type="date" class="toDate" select=":last" required="" />
</template>

the select parameter defines, where the value is taken from so the first input field takes the first div from the "#fromToDate".

Last we have to populate the "shadow root" and define the logic:

var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(),
    template = document.querySelector('#fromToDateTemplate');
shadow.appendChild(template.content);


shadow.querySelector(".fromDate").addEventListener("change", function (e) {
    var to = this.value;

    shadow.querySelector(".toDate").setAttribute("min", this.value);
});

template.remove();

In the end two input fields are renderd and when selecting a date in the first datepicker, the second datepicker can't pick any lower data.

Fiddler example: http://jsfiddle.net/cMS9A/

Advantages:

• Build as widget
• Easy to reause
• won't break pages
• can be styled independently

Disadvantages:

• Not supported in all browsers yet

Future reading:

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
• https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html

这篇关于如何使用HTML5来验证日期范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！