×
☰ See All Chapters

JSF <f:convertDateTime> Tag

<f:convertDateTime>is used to convert user input data into a different Date/Time formats. Following are the different attributes of this tag which help in displaying in different format and patterns.

Attributes

Possible Values

type

date, time

dateStyle

short, medium, long, full

timeStyle

Short, medium, long, full

pattern

dd-mm-yy, mm-dd-yy, yyyy-dd-mm, dd/mm/yyyy etc…

locale

Any locale value

JSF <f:convertDateTime> Tag Example

pom.xml

<project xmlns="https://maven.apache.org/POM/4.0.0"

        xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"

        xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">

        <modelVersion>4.0.0</modelVersion>

        <groupId>com.java4coding</groupId>

        <artifactId>JSF_convertDateTime</artifactId>

        <packaging>war</packaging>

        <version>1.0-SNAPSHOT</version>

        <dependencies>

                <dependency>

                        <groupId>com.sun.faces</groupId>

                        <artifactId>jsf-api</artifactId>

                        <version>2.2.6</version>

                </dependency>

                <dependency>

                        <groupId>com.sun.faces</groupId>

                        <artifactId>jsf-impl</artifactId>

                        <version>2.2.6</version>

                </dependency>

        </dependencies>

        <build>

                <finalName>JSF_convertDateTime</finalName>

        </build>

</project>

web.xml

<!DOCTYPE web-app PUBLIC

 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

 "https://java.sun.com/dtd/web-app_2_3.dtd" >

 

<web-app>

        <display-name>Archetype Created Web Application</display-name>

        <servlet>

                <servlet-name>Faces Servlet</servlet-name>

                <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

                <load-on-startup>1</load-on-startup>

        </servlet>

        <servlet-mapping>

                <servlet-name>Faces Servlet</servlet-name>

                <url-pattern>*.xhtml</url-pattern>

        </servlet-mapping>

</web-app>

HelloBean.java

package com.java4coding;

 

import java.util.Date;

import javax.faces.bean.ManagedBean;

 

@ManagedBean

public class HelloBean {

        private Date dob;

 

        public Date getDob() {

                return dob;

        }

 

        public void setDob(Date dob) {

                this.dob = dob;

        }

 

        public String display() {

                return "second";

        }

 

}

first.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="https://www.w3.org/1999/xhtml"

        xmlns:h="https://xmlns.jcp.org/jsf/html"

        xmlns:f="https://xmlns.jcp.org/jsf/core">

 

<h:head></h:head>

<h:body style="background-color:yellow">

<h:form>

        <h:panelGrid columns="3" align="left">

                <h:outputText value="Enter your DOB" />

                <h:inputText id="db" value="#{helloBean.dob}" converterMessage="Please enter date in the DD-MM-YYYY format">

                <f:convertDateTime pattern="dd-MM-yyyy" />

                </h:inputText>

                <h:message for="db" style="color:red" />

                       

                <h:commandButton type="reset" value="Reset" />

                <h:commandButton value="Submit" action="#{helloBean.display}" />

        </h:panelGrid>

 

</h:form>

</h:body>

</html>

second.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="https://www.w3.org/1999/xhtml"

        xmlns:h="https://xmlns.jcp.org/jsf/html"

        xmlns:f="https://xmlns.jcp.org/jsf/core">

 

<h:head></h:head>

<h:body style="background-color:wheat">

        <h2>

                <h:panelGrid columns="2">

               

                        DOB in default format is

                        <h:outputText value="#{helloBean.dob}" />

 

                        DOB in custom format is

                        <h:outputText value="#{helloBean.dob}">

                                <f:convertDateTime pattern="d-M-yyyy" />

                        </h:outputText>

                       

                        DOB in custom format is

                        <h:outputText value="#{helloBean.dob}">

                                <f:convertDateTime pattern="dd-MMM-yyyy" />

                        </h:outputText>

                       

                        DOB in custom format is

                        <h:outputText value="#{helloBean.dob}">

                                <f:convertDateTime type="date" dateStyle="short" locale="en_US" />

                        </h:outputText>

                       

                        DOB in custom format is

                        <h:outputText value="#{helloBean.dob}">

                                <f:convertDateTime type="date" dateStyle="long" locale="en_US" />

                        </h:outputText>

                       

                        DOB in custom format is

                        <h:outputText value="#{helloBean.dob}">

                                <f:convertDateTime type="date" dateStyle="short" locale="en_IN" />

                        </h:outputText>

                       

                        DOB in custom format is

                        <h:outputText value="#{helloBean.dob}">

                                <f:convertDateTime type="date" dateStyle="long" locale="en_IN" />

                        </h:outputText>

 

                </h:panelGrid>

        </h2>

</h:body>

</html>

Eclipse Project Directory Structure

jsf-convertdatetime-0
 

Output

jsf-convertdatetime-1
 
jsf-convertdatetime-2
 
All Chapters
Author