跳转到内容

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


下一页: 格式化日期 | 上一页: 从文件选择
主页: XForms
华夏公益教科书