JSF <f:convertDateTime> Tag

It is used to convert user input into specified date. You can convert a component's data to a java.util.Date by nesting the convertDateTime tag inside the component tag. The convertDateTime tag has several attributes that allow you to specify the format and type of the data.

Tag Attributes

Attribute	Type	Description
binding	DateTimeConverter	It is used to bind a converter to a managed bean property.
dateStyle	String	It is used to define the format, as specified by java.text.DateFormat, of a date or the date part of a date string. Applied only if type is date or both and if pattern is not defined. Valid values: default, short, medium, long, and full. If no value is specified, default is used.
for	String	It is used to refer to one of the objects within the composite component inside which this tag is nested.
locale	String or Locale	It is a instance of Locale whose predefined styles for dates and times are used during formatting or parsing. If not specified, the Locale returned by FacesContext.getLocale will be used.
pattern	String	It is used for custom formatting pattern that determines how the date/time string should be formatted and parsed. If this attribute is specified, dateStyle, timeStyle, and type attributes are ignored.
timeStyle	String	It is used to define the format, as specified by java.text.DateFormat, of a time or the time part of a date string. Applied only if type is time and pattern is not defined. Valid values: default, short, medium, long, and full. If no value is specified, default is used.
timeZone	String or TimeZone	It is used for time zone in which to interpret any time information in the date string.
type	String	It is used to specifie whether the string value will contain a date, a time, or both. Valid values are date, time, or both. If no value is specified, date is used.

JSF <f:converterDateTime> Tag Example 1

// index.xhtml

<h:form>
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="user-id" value="#{user.name}"/><br/>
<h:outputLabel for="age">Date of Birth</h:outputLabel>
<h:inputText id="dob-id" value="#{user.dob}" converterMessage="Please provide date of birth in dd/mm/yyyy format">
<f:convertDateTime pattern="dd/mm/yyyy" />
</h:inputText><br/>
<h:commandButton action="response.xhtml" value="Submit"/>
</h:form>

// User.java

import java.util.Date;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
Date dob;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Date getDob() {
return dob;
}
public void setDob(Date dob) {
this.dob = dob;
}
}

// response.xhtml

<h:body>
<h1> Hello, 
<h:outputText value="#{user.name}"/>
</h1>
<h:outputLabel>Your date of birth is: </h:outputLabel>
<h:outputText value="#{user.dob}">
<f:convertDateTime pattern="dd/mm/yyyy"/>
</h:outputText>
</h:body>

Output:

// index page

// index page

// response page

JSF <f:converterDateTime> Tag Example 2

// index.xhtml

<h:form>
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="user-id" value="#{user.name}"/><br/>
<h:outputLabel for="age">Date of Birth</h:outputLabel>
<h:inputText id="dob-id" value="#{user.dob}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:inputText>
<br/>
<h:commandButton action="response.xhtml" value="Submit"/>
</h:form>

// User.Java

import java.util.Date;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
Date dob;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Date getDob() {
return dob;
}
public void setDob(Date dob) {
this.dob = dob;
}
}

// response.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:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1> Hello, 
<h:outputText value="#{user.name}"/>
</h1>
<h:outputLabel value="Your date of birth in different-different formats is given below:"></h:outputLabel><br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime type="date" dateStyle="medium"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime type="date" dateStyle="full"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime type="time" dateStyle="full"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime type="date" pattern="dd/mm/yyyy"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime dateStyle="full" pattern="yyyy-mm-dd"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime dateStyle="full" pattern="yyyy.MM.dd 'at' HH:mm:ss z"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime dateStyle="full" pattern="h:mm a"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime dateStyle="long" timeZone="EST" type="both"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime locale="de" timeStyle="long" type="both" dateStyle="full"/>
</h:outputText>
<br/>
<h:outputText value="#{user.dob}">
<f:convertDateTime locale="en" timeStyle="short" type="both" dateStyle="full"/>
</h:outputText>
</h:body>
</html>

Output:

// index page