A custom datepicker tag for Grails based on jQuery-UI

When designing input forms within a Grails application it is sometimes necessary to handle dates. Grails offers a specific tag that one can use in a GSP page to handle dates: <g:datePicker />.
This tag will be rendered to the end user as different elements:

  • 3 separate select elements (days, months and years)
  • 1 hidden field (with the name specified in the tag with the fixed value “date.struct”, which is used by Grails to know that it will have to use the fields name_day, name_month and name_year to get / set the date.

In an application I was happily using this tag. However I decided it would be interesting to provide the user with a more graphic way of selecting a date. Since my application was already using JQuery and JQuery-UI, I though that JQuery-UI’s datepicker could be an intresting choice.

Grails gives developers the option to develope custom tags. In order to generate a custom tag, you have to generate a custom library.

I therefore created a custom library containing a single tag that I named <g:datepickerUI />.

You can see/download the implementation here: https://github.com/lturista/grails-datepickerUI

Just open JQueryUITagLib.groovy, optionally change the package name and put it put the in your grails-app/taglib folder. You can use the tag in your GSP pages, here is an example:

<g:datepickerUI name=”myDate” required=”true” value=”${myDomainClass?.myDate}” options=”{minDate:’-2Y’, maxDate:’+1Y’}” class=”form-control”/>

Advertisements
A custom datepicker tag for Grails based on jQuery-UI