Friday, September 13, 2013

How to Display Date and Time in your Grails Application

I am going to show you how you can accept Data and Time from the user as input using 'Jquery Date Time Picker Plugin'.

You can read more about the plugin here.

Step 1:

In BuildConfig.groovy, add the following code in plugins tag as:

plugins { 
    compile ":jquery-ui:1.8.24" 
    compile ':jquery-date-time-picker:0.1.0'
}

Step 2:

In Config.groovy, add the following code:


jqueryDateTimePicker {
format {
java {
datetime = "dd-MM-yyyy HH:mm"
date = "dd-MM-yyyy"
}
picker {
date = "'dd/mm/yy'"
time = "'H:mm'"
}
}
}

Step 3:
In your model, you need to define one variable which has 'Date' object type.
E.g.
class TestModel {

Date dateAndTimeOfInterview
}


Step 4:
In your gsp page, add the following code.

<div class="fieldcontain ${hasErrors(bean: testModelInstance, field: 
                   'dateAndTimeOfInterview', 'error')} required">
<label for="dateAndTimeOfInterview">
  <g:message code="testModel.dateAndTimeOfInterview.label" 
                        default="Date and Time Of Interview" />
<span class="required-indicator">*</span>
</label>
<jqueryPicker:time name="dateAndTimeOfInterview"      
      value="${testModelInstance?.dateAndTimeOfInterview}" />
</div>


Step 5:

Enjoy this UI.



1 comment: