2

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)

  • Google Chrome (51.0.2704.84 m)
  • Google Chrome on Android (51.0.2704.81)
  • Mozilla Firefox on Android (47.0)
  • Mircosoft Edge (25.10586.0.0)
  • Safari (no version, tested by friends)

Browsers (not working)

  • Mozilla Firefox (47.0)
  • Internet Explorer (11.306.10586.0)
  • Android Browser (don't know the exact version)

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:

  1. What causes this malformed input element?
  2. Is there any solution to get this to work on IE11 and Firefox 47.0 for PC?
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
mweber
  • 107
  • 1
  • 9
  • In Firefox some of the HTML5 inputs are not working. I had a problem with numeric field - Firefox treats it like a normal input, unlike Chrome, which allows only numbers. – Bakudan Jun 10 '16 at 11:44
  • So it's a Firefox bug? – mweber Jun 10 '16 at 19:12
  • I read a question in SO stating, this is a canceled feature - both in standart and by Firefox. If I find it i will post it. – Bakudan Jun 12 '16 at 11:26

1 Answers1

3

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:

  1. HTML5 is activated by <!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.
  2. I wonder why you added the 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.
  3. That's just a recommendation: I prefer to avoid renaming things. Just omit the parameter of @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.
Community
  • 1
  • 1
Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
  • 2
    Related reading on those minor issues: 1) http://stackoverflow.com/q/16035349 2) http://stackoverflow.com/q/13071512 3) http://stackoverflow.com/q/5697351 – BalusC Jun 11 '16 at 20:54
  • 1. Totally missed this! I never thought about the Doctype so maybe I should take a look at my other views, too. I should configure autogeneration to use this Doctype. 2. You're right the immediate hasn't had any use in this example. Part of it has been copied from a view so obviously I missed deleting the attribute. 3. I wonder myself why I renamed this bean. Normally I don't do that. I think it's an official HTML5 standard. According to these: 1) [link](http://www.w3schools.com/html/html_form_input_types.asp) 2) [link](https://www.w3.org/TR/html5/forms.html#date-state-(type=date)) – mweber Jun 13 '16 at 12:24