Struts 2 datetimepicker Example
In this section we will show you how to develop
datetimepicker in struts 2. Struts 2 uses the dojo toolkit for creating date
picker. In Struts 2 its very easy to create date time picker.
The <s:datetimepicker .../> tag
The Struts 2 <s:datetimepicker ...> actually
renders date/time picker in the dropdown container. When user clicks on the calendar
icon the date/time picker is displayed on the form.
Struts 2 date picker is actually Dojo widget, that
makes it easy to select a date. It also provides easy way to select any
date/month/year very fast. The date time picker will make your web application
very user friendly.
Writing time picker code
Action class to get today's date is DateBean. Here
is the code of DateBean.java
package net.roseindia;
import com.opensymphony.xwork2.ActionSupport;
import java.util.Date;
/**
* <p> Validate a user login. </p>
*/
public class DateBean extends ActionSupport {
public String execute() throws Exception {
setTodayDate(new Date());
return SUCCESS;
}
// ---- Username property ----
/**
* <p>Field to store Today's Date.</p>
* <p/>
*/
private Date todayDate;
/**
* <p>Provide Today's Date.</p>
*
* @return Returns the Todays date.
*/
public Date getTodayDate() {
return todayDate;
}
/**
* <p>Store new Date</p>
*
* @param value The username to set.
*/
public void setTodayDate(Date value) {
todayDate = value;
}
} |
Add the following entry in the struts.xml file in order
to create action mapping:
<action name="DateTimePicker" class="net.roseindia.DateBean">
<result>/pages/datepicker.jsp</result>
</action>
Following jsp file(datepicker.jsp) shows the
usage of datepicker tag:
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>Struts 2 Format Date Example!</title>
<link href="<s:url value="/css/main.css"/>" rel="stylesheet"
type="text/css"/>
<s:head theme="ajax" />
</head>
<body>
<s:form action="DateTimePicker" method="POST">
<s:datetimepicker name="todayDate" label="Format (yyyy-MM-dd)" displayFormat="yyyy-MM-dd"/>
<s:datetimepicker name="todayDate" label="Format (dd-MMM-yyyy)" displayFormat="dd-MMM-yyyy"/>
</s:form>
</body>
</html>
|
Struts 2 date picker is dojo widget so, it is necessary
to generate the client side JavaScript code. The <s:head theme="ajax" />
generates the client side dojo specific java script. Here is the code generated
by this tag:
<link rel="stylesheet" href="/struts2tutorial/struts/xhtml/styles.css" type="text/css"/>
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
baseRelativePath: "/struts2tutorial/struts/dojo",
isDebug: false,
bindEncoding: "UTF-8",
debugAtAllCosts: true // not needed, but allows the Venkman debugger to work with the includes
};
</script>
<script language="JavaScript" type="text/javascript"
src="/struts2tutorial/struts/dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript"
src="/struts2tutorial/struts/simple/dojoRequire.js"></script>
<script language="JavaScript" type="text/javascript"
src="/struts2tutorial/struts/ajax/dojoRequire.js"></script>
<script language="JavaScript" type="text/javascript"
src="/struts2tutorial/struts/CommonFunctions.js"></script>
The code:
<s:datetimepicker name="todayDate" label="Format (yyyy-MM-dd)" displayFormat="yyyy-MM-dd"/>
generates the date/time picker on the form.
Following table summarizes the format by datepicker
component:
| Format |
Description |
| dd |
This format is used to display day in two digits format |
| d |
Try to display day in one digit format, if cannot use 2 digit format |
| MM |
The format displays month in two digits format |
| M |
It try to display month in one digits format, if cannot use 2 digit
format |
| yyyy |
Display year in four digits format |
| yy |
Display the last two digits of the year |
| y |
Display the last digits of the year |
Here is the output of the program
In this section we have studied how to use Struts 2
datepicker control.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
