Grails Cookbook - A collection of tutorials and examples

Grails datePicker Tag

The datePicker tag (<g:datePicker>) can be used to render an HTML for date input. It may render the input components for the day, month, year, hour and second. What is rendered can be controlled depending on parameter used. here are some examples:

Simple Example

We usually use datePicker tag to input details of a model class in a form. Here is a simple model class:

class Person {
    String firstName
    String lastName
    Date dateOfBirth
   ...
}
And here is a simple controller:
class TestController {
    def create() {
        Person person = new Person()
        person.dateOfBirth = new Date()
        [person:person]
    }
}

Here is a sample GSP snippet:

<g:datePicker name="dateOfBirth" value="${person?.dateOfBirth}"
   noSelection="['':'-Choose-']"/>

The tag will render the following HTML:

<select id="dateOfBirth_day" name="dateOfBirth_day">
<option selected="selected" value="">-Choose-</option>
<option value="1">1</option>
...
<option value="31">31</option>
</select>
<select id="dateOfBirth_month" name="dateOfBirth_month">
<option selected="selected" value="">-Choose-</option>
<option value="1">January</option>
...
<option value="12">December</option>
</select>
<select id="dateOfBirth_year" name="dateOfBirth_year">
<option selected="selected" value="">-Choose-</option>
<option value="1916">1916</option>
...
<option value="2116">2116</option>
</select>
<select id="dateOfBirth_hour" name="dateOfBirth_hour">
<option selected="selected" value="">-Choose-</option>
<option value="00">00</option>
...
<option value="23">23</option>
</select>
<select id="dateOfBirth_minute" name="dateOfBirth_minute">
<option selected="selected" value="">-Choose-</option>
<option value="00">00</option>
...
<option value="59">59</option>
</select>

Note by default, dayt, month, year, hour and second was displayed.

Filling the noSelection will make each input component optional. The text value of noSelection is shown as the first option, which corresponds to blank or null value. When we remove the noSelection, for example:

<g:datePicker name="dateOfBirth" value="${person?.dateOfBirth}"/>

The rendered HTML will not have a blank option for each select:

<select id="dateOfBirth_day" name="dateOfBirth_day">
<option selected="selected" value="1">1</option>
...
<option value="31">31</option>
</select>
<select id="dateOfBirth_month" name="dateOfBirth_month">
<option selected="selected" value="1">January</option>
...
<option value="12">December</option>
</select>
<select id="dateOfBirth_year" name="dateOfBirth_year">
<option selected="selected" value="1916">1916</option>
...
<option value="2116">2116</option>
</select>
<select id="dateOfBirth_hour" name="dateOfBirth_hour">
<option selected="selected" value="00">00</option>
...
<option value="23">23</option>
</select>
<select id="dateOfBirth_minute" name="dateOfBirth_minute">
<option selected="selected" value="00">00</option>
...
<option value="59">59</option>
</select>

Precision

We can control which select input will be displayed using the precision parameter. For example:
<g:datePicker name="dateOfBirth" precision="day" value="${person?.dateOfBirth}"/>
Will remove the hour and second. What will be left is the day, month and year only. Which will have the following HTML:
<select id="dateOfBirth_day" name="dateOfBirth_day">
<option selected="selected" value="1">1</option>
...
<option value="31">31</option>
</select>
<select id="dateOfBirth_month" name="dateOfBirth_month">
<option selected="selected" value="1">January</option>
...
<option value="12">December</option>
</select>
<select id="dateOfBirth_year" name="dateOfBirth_year">
<option selected="selected" value="1916">1916</option>
...
<option value="2116">2116</option>
</select>

If we use precision=month, only month and year will be displayed:

<g:datePicker name="dateOfBirth" precision="month" value="${person?.dateOfBirth}"/>

Here is the rendered HTML:

<select id="dateOfBirth_month" name="dateOfBirth_month">
<option selected="selected" value="1">January</option>
...
<option value="12">December</option>
</select>
<select id="dateOfBirth_year" name="dateOfBirth_year">
<option selected="selected" value="1916">1916</option>
...
<option value="2116">2116</option>
</select>

If we use precision=year, only year is displayed:

<g:datePicker name="dateOfBirth" precision="year" value="${person?.dateOfBirth}"/>

Here is the HTML:

<select id="dateOfBirth_year" name="dateOfBirth_year">
<option selected="selected" value="1916">1916</option>
...
<option value="2116">2116</option>
</select>

Years

The default list of years is very long. We can control what years is displayed. here is an example using range:

<g:datePicker name="dateOfBirth" precision="year"
   value="${person?.dateOfBirth}" years="${1990..1999}"/>

Here is the rendered HTML:

<select name="dateOfBirth_year" id="dateOfBirth_year">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>

Here is an example using enumerated years:

<g:datePicker name="dateOfBirth" precision="year" value="${person?.dateOfBirth}"
   years="${[2000, 2005, 2010, 2015]}"/>

Here is the rendered HTML:

<input type="hidden" name="dateOfBirth" value="date.struct" />
<select name="dateOfBirth_year" id="dateOfBirth_year">
<option value="2000">2000</option>
<option value="2005">2005</option>
<option value="2010">2010</option>
<option value="2015">2015</option>
</select>

We can also use relative years if we want to show from X years upto Y years relative to the current year.

<g:datePicker name="dateOfBirth" precision="year"
   value="${person?.dateOfBirth}" relativeYears="[-2..2]"/>

Here is the rendered HTML, the current year is 2016:

<input type="hidden" name="dateOfBirth" value="date.struct" />
<select name="dateOfBirth_year" id="dateOfBirth_year"
><option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016" selected="selected">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>


Other Grails Tag Examples


Tags: datePicker, Grails Tag