Grails formatDate Tag Example

Feb 20, 2016 Tag comments

The Grails' <g:formatDate> tag can be used inside GSPs to format java.util.Date instances for display. The tag is based on Java's SimpleDateFormat class. Below are some examples on how to use this tag.

Simple Usage

The minimum requirement to use the formatDate is to pass a date value:

<g:formatDate date="${new Date()}"/>

It will output a default format similar below:

 2016-02-20 21:11:50 SGT

Type

There are many attributes of the formatDate tag to customize the output. One of them is type which can be date, time, datetime or both. Here are sample code and outputs:

• datetime
  

  <g:formatDate date="${new Date()}" type="datetime"/>
  

  2/20/16 9:15 PM 

• date
  

  <g:formatDate date="${new Date()}" type="date"/>
  

  2/20/16

• time
  

  <g:formatDate date="${new Date()}" type="time"/>
  

  9:15 PM

• both
  

  <g:formatDate date="${new Date()}" type="both"/>
  

  2/20/16 9:15 PM

Style

Another way to customize the formatDate tag's output is to use the style attribute. Possible values are: SHORT, MEDIUM, LONG, FULL. SHORT is the default value if not specified. Here are some examples:

• datetime
  
  • SHORT
    

    <g:formatDate date="${new Date()}" type="datetime" style="SHORT"/>
    

    2/20/16 9:20 PM

  • MEDIUM
    

    <g:formatDate date="${new Date()}" type="datetime" style="MEDIUM"/>
    

    Feb 20, 2016 9:20:32 PM

  • LONG
    

    <g:formatDate date="${new Date()}" type="datetime" style="LONG"/>
    

    February 20, 2016 9:20:32 PM SGT

  • FULL
    

    <g:formatDate date="${new Date()}" type="datetime" style="FULL"/>
    

    Saturday, February 20, 2016 9:20:32 PM SGT

• date
  
  • SHORT
    

    <g:formatDate date="${new Date()}" type="date" style="SHORT"/>
    

    2/20/16

  • MEDIUM
    

    <g:formatDate date="${new Date()}" type="date" style="MEDIUM"/>
    

    Feb 20, 2016

  • LONG
    

    <g:formatDate date="${new Date()}" type="date" style="LONG"/>
    

    February 20, 2016

  • FULL
    

    <g:formatDate date="${new Date()}" type="date" style="FULL"/>
    

    Saturday, February 20, 2016

• time
  
  • SHORT
    

    <g:formatDate date="${new Date()}" type="time" style="SHORT"/>
    

    9:20 PM

  • MEDIUM
    

    <g:formatDate date="${new Date()}" type="time" style="MEDIUM"/>
    

    9:20:32 PM

  • LONG
    

    <g:formatDate date="${new Date()}" type="time" style="LONG"/>
    

    9:20:32 PM SGT

  • FULL
    

    <g:formatDate date="${new Date()}" type="time" style="FULL"/>
    

    9:20:32 PM SGT 

For fine grain control of style, there is also dateStyle and timeStyle attribute to customize the format.

Format

Instead of passing type and style, we can pass a custom format to the formatDate tag. Here are some simple examples:

• MMMM dd, yyyy
  

  <g:formatDate format="MMMM dd, yyyy" date="${new Date()}"/>
  

  February 20, 2016

• MMM dd, yyyy z
  

  <g:formatDate format="MMM dd, yyyy z" date="${new Date()}"/>
  

  Feb 20, 2016 SGT

• MM dd, yyyy Z
  

  <g:formatDate format="MM dd, yyyy Z" date="${new Date()}"/>
  

  02 20, 2016 +0800 

• M dd, yyyy G
  

  <g:formatDate format="M dd, yyyy G" date="${new Date()}"/>
  

  2 20, 2016 AD 

Here are the available pattern letters and their meaning. Check here for details:

Letter	Date or Time Component	Example
G	Era designator	AD
y	Year	1996; 96
M	Month in year	July; Jul; 07
w	Week in year	27
W	Week in month	2
D	Day in year	189
d	Day in month	10
F	Day of week in month	2
E	Day in week	Tuesday; Tue
a	Am/pm marker	PM
H	Hour in day (0-23)	0
k	Hour in day (1-24)	24
K	Hour in am/pm (0-11)	0
h	Hour in am/pm (1-12)	12
m	Minute in hour	30
s	Second in minute	55
S	Millisecond	978
z	Time zone	Pacific Standard Time; PST; GMT-08:00
Z	Time zone	-0800