Question

我目前正在开发一个使用JSF 2.2，Bootsfaces 0.8.6和Primefaces 5.3的项目。在注册页面上工作时，我提到了使用type =“date”显示和Bootsfaces行为的问题。

通常，input元素有一种占位符，用于显示日期的格式，以及元素右端的一些选择元素。在Chrome和Microsoft Edge上一切正常，但是在使用IE11和Firefox 47.0的情况下，输入显示为标准文本输入，没有选择元素和格式提示。它看起来就像是一个旧的浏览器试图解释不支持它的HTML5。

所以我也尝试使用Chrome和Firefox在移动设备上运行，没有任何问题。总而言之，我列出了哪些浏览器使用input元素，哪些浏览器不使用：

浏览器（工作）

谷歌浏览器（51.0.2704.84米）
Android版Google Chrome（51.0.2704.81）
Android上的Mozilla Firefox（47.0）
Mircosoft Edge（25.10586.0.0）
Safari（没有版本，经过朋友测试）

浏览器（不工作）

Mozilla Firefox（47.0）
Internet Explorer（11.306.10586.0）
Android浏览器（不知道具体版本）

我尽量保持以下示例尽可能短而简单，以防止出现一些明显的错误。它显示了一个测试我所说的内容的例子。

的index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <meta charset="UTF-8"/>
    </h:head>

    <h:body>
        <h:form id="form">
            <b:row style="margin: 1em;">
                <b:column span="4">
                    <b:inputText id="dateInput" type="date" value="#{test.date}" immediate="true"/>
                </b:column>
            </b:row>
        </h:form>
    </h:body>
</html>

TestBean.java（处理输入的Bean）

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name = "test")
@ViewScoped
public class TestBean {

    private String date;

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
        System.out.println(date);
    }
}

我的最后一个问题是：

导致此格式错误的输入元素的原因是什么？
是否有任何解决方案可以在IE11和Firefox 47.0 for PC上使用它？

Answer 1

根据CanIUse，Firefox和IE以及Opera都不支持input type="date"。如果the answers to this StackOverflow question是正确的，那么Google的提案不是官方的HTML5标准。

作为跨浏览器的替代方案，我们提供了一个BootsFaces日期选择器：<b:datePicker />和<b:dateTimePicker />。阅读our showcase on b:datePicker的完整故事。

顺便说一下，我在你的代码中看到了三个小问题。这些可能是偏离主题的，但也许它对您或其他读者来说是有用的信息：

HTML5由<!DOCTYPE HTML>激活。另请参阅the W3Schools arcticle或HTML5规范。您的doctype指示浏览器忽略HTML5。可能大多数浏览器都没有精确地实现规范，但你永远不会知道。
我想知道为什么你将immediate属性添加到日期选择器中。 immediate的使用很少。最突出的例子是“取消”按钮。在你的情况下，属性是有道理的，但我对此表示怀疑。
这只是一个建议：我更愿意避免重命名。只需省略@ManagedBean(name="test")的参数即可。它需要更多的击键来编写#{testBean.date}，但优点是你总是知道类名只是在阅读XHTML文件。这取决于你是否遵循我的建议，但我的经验是，从长远来看，它会让生活更轻松。

b：inputText类型“日期”不适用于IE 11和Firefox 47.0

1 个答案: