b:inputText 类型 "date" 不适用于 IE 11 和 Firefox 47.0

Question

我目前正在开发一个使用 JSF 2.2、Bootsfaces 0.8.6 和 Primefaces 5.3 的项目。在处理注册页面时，我提到了使用 type="date".

显示和 Bootsfaces 行为的问题

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

所以我也尝试在移动设备上使用 Chrome 和 Firefox，并且没有任何问题。最后，我列出了哪些浏览器支持输入元素，哪些不支持：

浏览器（正常）

Google Chrome (51.0.2704.84 m)
Google Chrome Android (51.0.2704.81)
Android (47.0)
微软边缘 (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, neither Firefox nor IE nor Opera support input type="date". It's a Google proposal that's not an official HTML5 standard if the answers to this Whosebug question是正确的。

作为跨浏览器的替代方案，我们提供了 BootsFaces 日期选择器：<b:datePicker /> 和 <b:dateTimePicker />。在 our showcase on b:datePicker.

阅读全文

顺便说一下，我在您的代码中发现了三个小问题。这些可能是题外话，但也许对您或其他人来说仍然是有用的信息 reader:

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

b:inputText 类型 "date" 不适用于 IE 11 和 Firefox 47.0

b:inputText type "date" not working on IE 11 and Firefox 47.0

jsf

firefox

internet-explorer-11

android-browser

bootsfaces