2

我目前正在使用JSF 2.2,Bootsfaces 0.8.6和Primefaces 5.3的项目。在处理注册页面时,我提到了使用type =“date”显示Bootsfaces行为的问题。b:inputText类型“日期”不适用于IE 11和Firefox 47.0

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

所以我也试着在Chrome和Firefox的移动设备上运行,没有任何问题。最后,我做了一个列表,它的浏览器与输入的单元工作和那些不:

浏览器(工作)

  • 谷歌浏览器(51.0.2704.84米)
  • 谷歌浏览器在Android(51.0.2704.81)
  • Mozilla Firefox浏览器在Android(47.0)
  • 的Mircosoft边缘(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); 
    } 
} 

我最后的问题是:

  1. 是什么原因导致这种畸形的输入元素?
  2. 有没有解决方案可以让IE11和Firefox 47.0在PC上运行?
+0

在Firefox中,一些HTML5输入不起作用。我有一个数字字段的问题 - Firefox将它视为正常输入,不像铬,它只允许数字。 – Bakudan

+0

所以这是一个Firefox的错误? – mweber

+0

我在SO中读到一个问题,这是一个取消的功能 - 无论是在标准模式还是在Firefox。如果我发现它,我会发布它。 – Bakudan

回答

3

根据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

顺便说一下,我在代码中看到三个小问题。这些可能是无关紧要的,但可能对您或其他读者有用的信息:

  1. HTML5由<!DOCTYPE HTML>激活。另请参阅the W3Schools arcticle或HTML5规范。您的doctype指示浏览器忽略HTML5。可能大多数浏览器并没有完全实现这个规范,但你永远不知道。
  2. 我想知道为什么您将immediate属性添加到日期选择器。 immediate的用途非常少。最显着的例子是“取消”按钮。有可能这个属性对你的情况有意义,但我怀疑它。
  3. 这只是一个建议:我宁愿避免重命名的东西。只要省略参数@ManagedBean(name="test")即可。它需要更多的击键来编写#{testBean.date},但好处是你总是知道类名只是读取XHTML文件。这取决于你的意见,但我的经验是,从长远来看,它使生活更轻松。
+2

关于这些小问题的相关阅读:1)http://stackoverflow.com/q/16035349 2)http://stackoverflow.com/q/13071512 3)http://stackoverflow.com/q/5697351 – BalusC

+0

1。完全错过了!我从来没有想过Doctype,所以也许我应该看看我的其他观点。我应该配置autogeneration使用此Doctype。 2.你说得对,在这个例子中直接没有任何用处。它的一部分已从视图中复制,所以显然我错过了删除属性。 3.我想知道为什么我重命名这个bean。通常我不这样做。 我认为这是一个官方的HTML5标准。根据这些: 1)[link](http://www.w3schools.com/html/html_form_input_types.asp) 2)[link](https://www.w3.org/TR/html5/forms html的#日期国有(类型=日期)) – mweber

相关问题