XForms/选择日期
外观
< XForms
用户经常希望选择一个日期,而不是在字段中键入日期。他们通常希望选择一个日期,例如“下周二”,但他们可能需要使用日历来查找周二的日期。
幸运的是,大多数 XForms 实现都内置了日历选择器。
如果您有一个与日期类型绑定的字段,表单将如下所示
这是一个使用日期选择器的示例
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>Example using a date selector by binding an instance to an XML Schema date type</title>
<xf:model>
<xf:instance xmlns="">
<data>
<MyDate />
</data>
</xf:instance>
<xf:bind nodeset="MyDate" type="xs:date" />
</xf:model>
</head>
<body>
<p>Example of using the date selector by binding an instance to an XML Schema date type:
<br />
<xf:input ref="MyDate">
<xf:label>Enter a date: </xf:label>
</xf:input>
</p>
</body>
</html>
一个小的日历图标应该直接出现在输入字段的右侧。点击日历图标并选择一个日期。请注意,您可以使用日历选择器更改日期和月份。
关键行是
<xf:bind nodeset="MyDate" type="xs:date" />
请注意,如果您不使用 bind 命令,输入将像普通文本字段一样工作。
输入到日期字段的格式为 YYYY-MM-DD,这是 XML 中用于日期的格式。您可以使用其他格式,例如 MM-DD-YYYY,但您必须使用 XPath 表达式来格式化字段的外观,并将外观与模型中的值分开。
一旦绑定到类型“xs:date”,空字符串(未设置日期)将不允许表单提交,没有已知的直接解决方案,但是使用自定义绑定可以克服此问题
示例
<xf:input ref="Date" appearance="date" />
css
@namespace xf url(http://www.w3.org/2002/xforms);
@namespace mozType url(http://www.mozilla.org/projects/xforms/2005/type);
xf|input[appearance="date"] {
-moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-date');
}
xf|input[appearance="date"] span[mozType|calendar] {
-moz-binding: url('chrome://xforms/content/widgets-xhtml.xml#calendar-full');
z-index: 2147481647;
}