2

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

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

所以我也尝试在移动设备上使用 Chrome 和 Firefox，它可以正常工作。总之，我列出了哪些浏览器可以使用 input 元素，哪些不可以：

浏览器（工作）

  • 谷歌浏览器 (51.0.2704.84 m)
  • Android 上的谷歌浏览器 (51.0.2704.81)
  • Android 上的 Mozilla Firefox (47.0)
  • 微软边缘 (25.10586.0.0)
  • Safari（无版本，朋友测试过）

浏览器（不工作）

  • 火狐 (47.0)
  • Internet Explorer (11.306.10586.0)
  • Android 浏览器（不知道具体版本）

我试图使以下示例尽可能简短和简单，以防止出现一些明显的错误。它显示了一个测试我所说的示例。

索引.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);
    }
}

我最后的问题是：

  1. 是什么导致了这个格式错误的输入元素？
  2. 有什么解决方案可以让它在 IE11 和 Firefox 47.0 for PC 上运行？
4

1 回答 1

3

根据CanIUse的说法，Firefox、IE 和 Opera 都不支持input type="date"。如果这个 StackOverflow 问题的答案是正确的，那么这是一个不是官方 HTML5 标准的 Google 提案。

作为跨浏览器的替代方案，我们提供了 BootsFaces 日期选择器：<b:datePicker />和<b:dateTimePicker />. 在 b:datePicker 上的展示中阅读全文。

顺便说一句，我在您的代码中看到了三个小问题。这些可能是题外话，但也许对您或其他读者来说仍然是有用的信息：

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