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"%>
<sj: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"%>

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

<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" 
<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" />

File: result.jsp

<%@ taglib prefix="s" uri="/struts-tags"%>
<title>Date Picker Result</title>
	<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 />


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;




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



On running the application:-
DateTime Using Jquery

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

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

  • Raichand Ray

    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