在这里,Web 组件非常有用,但还不是所有浏览器都完全支持它们。
这个想法是创建一个简单的 html 元素,有两个子元素(from 和 to),如下所示:
<div id="fromToDate">
<div></div>
<div></div>
</div>
然后创建一个模板,它定义了日期选择器的外观:
<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>
select 参数定义,从哪里获取值,因此第一个输入字段从“#fromToDate”获取第一个 div。
最后我们必须填充“影子根”并定义逻辑:
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();
最后呈现两个输入字段,并且在第一个日期选择器中选择日期时,第二个日期选择器无法选择任何较低的数据。
提琴手示例:http: //jsfiddle.net/cMS9A/
优点:
- 构建为小部件
- 易于重复使用
- 不会断页
- 可以独立设计
缺点:
未来阅读: