Pages Navigation Menu

Coding is much easier than you think

Datetime picker in struts 2 using jquery

Feature jquery struts 2

Last time when I worked out how to get the dojo datetimepicker Well, it faced some issues like, I could not customize the size of the text box, and also its appearance. As an alternative I found out a plugin Struts2- Jquery which provide a lots of customizing features.
 
** UPDATE: Struts 2 Complete tutorial now available here.
 
To create a date time pick component in struts 2, please follow this two steps :
 
1. Add struts2-jquery-plugin-3.6.1.jar in your class path.
2. Include the “struts-jquery-tags” tag and its header in your jsp page
 

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head  />
</head>

 
Do read :

 

Feature of jquery

 
Simple Calculator

<sj:datepicker id="1" name="simpleCalander" displayFormat="dd-mm-yy" label="Simple Calander"/>

 
Simple jquery calander
 
Calander with change year Option

<sj:datepicker id="2" name="changeYear" displayFormat="dd-mm-yy" changeYear="true" 
label="Change Year"/>

 
change year in struts 2 + jquery
 
Calander with ChangeYear and Monthyear Option

<sj:datepicker id="3" name="changeYearAndMonth" label="Change Month and Year" 
 changeMonth="true" changeYear="true"/>

 

jquery with change year and month in struts 2
 

Calander with Button Pannel Option

<sj:datepicker id="5" name="withPannel" label="With Button Panel" showButtonPanel="true"/>

 
j query with button pannel in struts 2
 

Calander with Show Seconds Option

<sj:datepicker id="4"  name="showSeconds"  label="Show Seconds" timepicker="true" 
 timepickerShowSecond="true" timepickerFormat="hh:mm:ss"/>

 

jquery with show second option
 
Now lets see the complete example
 

Jsp Page

 
File: datepicker.jsp

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html>
<head>
<title>Date Picker</title>
<sj:head  />
</head>

<body>
<h3>Struts2 Date Picker example</h3>
<s:form action="dateTimePicker" theme="xhtml">
<sj:datepicker id="1" name="simpleCalander" displayFormat="dd-mm-yy" label="SimpleCalander"/>
<sj:datepicker id="2" name="changeYear"  displayFormat="dd-mm-yy" changeYear="true" 
   label="ChangeYear"/>
<sj:datepicker id="3" name="changeYearAndMonth"
	label="Change Month and Year" changeMonth="true" changeYear="true" />
<sj:datepicker id="4" name="showSeconds" label="Show Seconds"
	timepicker="true" timepickerShowSecond="true" timepickerFormat="hh:mm:ss" />
<sj:datepicker id="5" name="withPannel" label="With Button Panel" showButtonPanel="true" />
<sj:datepicker id="6" name="slideDownEffect"
label="With fast slideDown Animation" showAnim="slideDown" duration="fast" />
<sj:datepicker id="7" name="fadeInEffect"
	label="With slow fadeIn Animation" showAnim="fadeIn"
		showOptions="{direction: 'up' }" duration="slow" />
<sj:datepicker id="8" name="yearRage" label="Show Years only from 2000 until 2020"
 yearRange="2000:2020" changeYear="true" />
<sj:datepicker id="9" name="withOutButton" label="Without Button" showOn="focus" />

<s:submit value="submit" name="submit" />
</s:form>
</body>
</html>

 
File: result.jsp
 

<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Date Picker Result</title>
</head>
<body>
	<h3>Struts2 Date Picker using Jquery</h3>
	simpleCalander : <s:property value="simpleCalander" />
	<br />
	changeYear : <s:property value="changeYear" />
	<br />
	changeYearAndMonth : <s:property value="changeYearAndMonth" />
	<br />

	showSeconds : <s:property value="showSeconds" />
	<br />
	withPannel : <s:property value="withPannel" />
	<br />
	slideDownEffect : <s:property value="slideDownEffect" />
	<br />
	fadeInEffect : <s:property value="fadeInEffect" />
	<br />
	yearRage : <s:property value="yearRage" />
	<br />
	withOutButton : <s:property value="withOutButton" />
	<br />
	      
</body>
</html>

 

Action Class

 

package com.simplecode.action;

import com.opensymphony.xwork2.Action;

public class DatePickerAction implements Action {

	private String simpleCalander;
	private String changeYear;
	private String changeYearAndMonth;
	private String showSeconds;
	private String withPannel;
	private String slideDownEffect;
	private String fadeInEffect;
	private String yearRage;
	private String withOutButton;

	public String getSimpleCalander() {
		return simpleCalander;
	}

	public String getChangeYear() {
		return changeYear;
	}

	public String getChangeYearAndMonth() {
		return changeYearAndMonth;
	}

	public String getShowSeconds() {
		return showSeconds;
	}

	public String getWithPannel() {
		return withPannel;
	}

	public String getSlideDownEffect() {
		return slideDownEffect;
	}

	public String getFadeInEffect() {
		return fadeInEffect;
	}

	public String getYearRage() {
		return yearRage;
	}

	public String getWithOutButton() {
		return withOutButton;
	}

	public void setSimpleCalander(String simpleCalander) {
		this.simpleCalander = simpleCalander;
	}

	public void setChangeYear(String changeYear) {
		this.changeYear = changeYear;
	}

	public void setChangeYearAndMonth(String changeYearAndMonth) {
		this.changeYearAndMonth = changeYearAndMonth;
	}

	public void setShowSeconds(String showSeconds) {
		this.showSeconds = showSeconds;
	}

	public void setWithPannel(String withPannel) {
		this.withPannel = withPannel;
	}

	public void setSlideDownEffect(String slideDownEffect) {
		this.slideDownEffect = slideDownEffect;
	}

	public void setFadeInEffect(String fadeInEffect) {
		this.fadeInEffect = fadeInEffect;
	}

	public void setYearRage(String yearRage) {
		this.yearRage = yearRage;
	}

	public void setWithOutButton(String withOutButton) {
		this.withOutButton = withOutButton;
	}

	public String execute() {
		return SUCCESS;
	}
}

 

struts.xml

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="" namespace="/jsp" extends="struts-default">
<action name="dateTimePicker" class="com.simplecode.action.DatePickerAction" method="execute">
  <result name="success">/jsp/result.jsp</result>
</action>
</package>
</struts>

 

Demo

 
On running the application:-
 
DateTime Using Jquery
 
download

About Mohaideen Jamil


Am currently working as a Struts 2 Developer in a reputed IT Organisations. I can help you with teaching Core java and Struts 2. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

  • Raichand Ray

    Hi,
    How to insert date from datepicker into Mysql date type field using struts2 and Hibernate?Also retrive from mysql database and display in datepicker.
    Thanks
    Raichand

  • Raichand Ray

    Hi,
    How to insert value from sj:datepicker to mysql database using hibernate and struts2?Any example

  • vishnu

    how to add muti date picker?

  • kaz

    how to change date format
    Ex: 2014-05-25