Friday 28 August 2015

Using the "liferay-ui:input-date" tag

Just a simple example to use the liferay-ui:input-date tag in our forms.

1. Firtly we need to import the required tag.
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

2. If you need to show the default selected date as Today. We need a Calendar object to get these values for our form.
<%
// To set today's date as default for the calendar.
Calendar today = Calendar.getInstance();
%>

3. Now for the actual form. The Liferay UI Date element is created here with the necessary parameters.
<label>
    Date of Birth
    <liferay-ui:input-date name="dobDate" 
        dayValue="<%= today.get(Calendar.DAY_OF_MONTH) %>" dayParam="dobDay"
        monthValue="<%= today.get(Calendar.MONTH) %>" monthParam="dobMonth"
        yearValue="<%= today.get(Calendar.YEAR) %>" yearParam="dobYear" />
</label>
The dayValue, monthValue and yearValue attributes are displayed to the user as soon as the form is loaded.
dayParam, monthParam and yearParam are the attributes representing the data when it is sent to the server side.
I have also set the name attribute which will send the selected date in MM/dd/yyyy format to the server.

4. Now for the server side, to retrieve the data from the user. This is the first way to fetch the data, below I have provided another way to do the same.
// Method 1
// We can fetch the date either by separate Day, Month and Year parameter.
int dobDay = ParamUtil.getInteger(actionRequest, "dobDay");
int dobMonth = ParamUtil.getInteger(actionRequest, "dobMonth");
int dobYear = ParamUtil.getInteger(actionRequest, "dobYear");

Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, dobDay);
calendar.set(Calendar.MONTH, dobMonth);
calendar.set(Calendar.YEAR, dobYear);

System.out.println("Method 1: " + calendar.getTime());
In our Portlet class, the dobDay, dobMonth and dobYear will provide the Day, Month and Year respectively. We can set this to a Calendar object and retrieve the Date object with the calendar.getTime() method.

5. Now for method 2.
// Method 2
// With the input String from the selected date.
try {
    String dobDateString = ParamUtil.getString(actionRequest, "dobDate");
    SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
    Date dobDate = sdf.parse(dobDateString);

    System.out.println("Method 2: " + dobDate);
}
catch (ParseException pe) {
    pe.printStackTrace();
}
Here we'll use the name parameter to fetch the same value. Using the SimpleDateFormat to parse the string we can retrieve the Date object.

Please find attached the entire source for the same in the below link.
calendar-portlet.zip

Hope all of this makes sense.

No comments :

Post a Comment