I'm currently working on a project which uses JSF 2.2, Bootsfaces 0.8.6 and Primefaces 5.3. While working on a registration page I mentioned a problem in displaying and the behaviour of a Bootsfaces with using type="date".
Normally the input element has kind of a placeholder for showing how the date is been formatted and some selection elements at the right end of the element. Everything works fine on Chrome and Microsoft Edge, however in case of using IE11 and Firefox 47.0 the input is displayed as a standard text input without the selection elements and the formatting hint. It looks exactly like an older browser trying to interpret HTML5 which doesn't support it.
So I tried also on mobile with Chrome and Firefox and there it works without any problem. In conclusion I made a list of which browsers work with the input element and those which doesn't:
Browsers (working)
Browsers (not working)
I tried to keep the following example as short and simple as possible for preventing some obvious mistakes. It shows an example for testing what I said.
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 to handle input)
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);
}
}
My final questions are:
According to 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 StackOverflow question are correct.
As a cross-browser alternative, we offer a BootsFaces date picker: <b:datePicker /> and <b:dateTimePicker />. Read the full story at our showcase on b:datePicker.
By the way, I see three minor issues in your code. These may be off-topic, but maybe it's useful information nonetheless to you or to another reader:
<!DOCTYPE HTML>. Also see the W3Schools arcticle or the HTML5 specification. Your doctype instructs the browser to ignore HTML5. Probably, most browsers don't implement the specification that precisely, but you never know.immediate attribute to the date picker. There are very few uses of immediate. The most prominent example being the "cancel" button. It's possible the attribute makes sense in your case, but I doubt it.@ManagedBean(name="test"). It requires more keystrokes to write #{testBean.date}, but the advantage is you always know the class name just be reading the XHTML file. It's up to you to follow my advice or not, but my experience is that it makes life easier on the long run.