fbpx
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


I'm a Full stack developer of IT exp in J2EE, AngularJs, MicroServices, Docker, Spring (Boot, MVC, Cloud), Bluemix, DevOps. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

Advertisements
%d bloggers like this: