Utilizing the JSF 2.3 f:convertDateTime Tag with the Java 8 Date-Time API

One of the features that is in-progress for the upcoming JSF 2.3 release is support for the Java 8 Date-Time API.  This support was added to the Mojarra 2.3.0 - Milestone 4 Snapshot before JavaOne 2015.  In this post, we'll take a brief look at this newly added support, which allows one to utilize the Java 8 Date-Time API with the standard JSF components via usage of the enhanced f:convertDateTime tag.  We will take a look at running an example application so that you can begin testing the features of JSF 2.3 today.

There are a number of posts covering the new f:convertDateTime functionality.  My fellow JSF 2.3 Expert Group member Arjan Tijms has an excellent post covering the new features of JSF 2.3:  http://arjan-tijms.omnifaces.org/p/jsf-23.html#1370  Anghel Leonard also has a repository with some great test sources:  https://github.com/AnghelLeonard/JSF-2.3/tree/master/JSF23convertDateTime.

In short, the f:convertDateTime tag now supports type attribute values that cover the Java 8 Date-Time data types.  Namely, you can now specify: both, date, time, localDate, localTime, localDateTime, offsetTime, offsetDateTime, and zonedDateTime.  You can then specify the pattern attribute on the tag to convert to the appropriate Date-Time format.

I have modified the sources for an application that I had written last year, AcmePools, such that it now supports the JSF 2.3 constructs when compiled and executed against Mojarra 2.3.0 - Milestone 4.  The updated sources have been posted to a new repository for JSF 2.3 testing purposes:  https://github.com/juneau001/AcmePools-JSF23. My post from 2014, Building and Testing JSF.next, has been updated to include details on utilizing the new Git repository for Mojarra.  It covers the basics of building Mojarra, and testing against the snapshot.  Please follow the directions in the post to get started.  Next, clone the new AcmePools sources that are compatible with JSF 2.3, and open the project in NetBeans, as shown in Figure 1.

Figure 1:  AcmePools-JSF23 in NetBeans

Once you've got the project open in NetBeans, you are ready to begin testing.  Take a look at the /job/List.xhtml view, and look at the "Job Date" column of the dataTable.  The h:outputText component has an f:convertDateTime tag applied to it, which will convert the date to the localDate type, as seen below.

<p:column>
         <f:facet name="header">
             <h:outputText value="Job Date"/>
         </f:facet>
         <h:outputText value="#{item.jobDate}">
              <f:convertDateTime type="localDate" pattern="MM/dd/yyyy"/>
         </h:outputText>
</p:column>

Taking a look at the jobDate field of the Jobs entity, you can see that it is of type LocalDate:

@Column(name = "JOB_DATE")
private LocalDate jobDate;

Similarly, if we look at the /job/Create.xhtml view, you can see that the standard inputText component can contain an embedded f:convertDateTime tag to perform the required input conversion.  In this case, we are using the PrimeFaces tag library, which also works with the f:convertDateTime tag.

<p:inputText id="jobDate" value="#{jobController.selected.jobDate}" title="Job Date">
     <f:convertDateTime type="localDate" pattern="MM/dd/yyyy"/>
</p:inputText>

Behind the scenes, this all works because of some changes made in the Mojarra javax.faces.convert.DateTimeFormatter class.  JSF 2.3 requires the use of Java 8, which enables the JSF developers to directly modify the sources to include Java 8 Date-Time classes.  As a quick test, I've modified the index.xhtml view of the application to include a Date-Time testing panel at the top.

<p:panel header="Date Test Panel">
    <p:inputText value="#{testController.todaysDate}">
        <f:convertDateTime type="localDate" pattern="dd-MM-yyyy"/>
    </p:inputText>
    <br/><br/>
    <h:outputText value="#{testController.todaysDate}">
        <f:convertDateTime type="localDate" dateStyle="short" />
    </h:outputText>
    <br/>
    <h:outputText value="#{testController.todaysDate}">
        <f:convertDateTime type="localDate" dateStyle="long"/>
    </h:outputText>
    <br/><br/>
    <h:outputText value="Today's Date is (old): #{testController.oldStyleDate}">
        <f:convertDateTime type="date"/>
    </h:outputText>
</p:panel>

The test panel looks like that in Figure 2.

Figure 2:  Date-Time Test Panel

Note that the AcmePools-JSF23 project can also be used to test other new JSF 2.3 features.  Download the sources, along with Mojarra 2.3.0 and get started testing JSF 2.3!