Skip to content

DatePickerTag

Jump to bottom Edit New page
Sai Prakash Pulipaka edited this page Apr 13, 2020 · 3 revisions

Introduction

A tag that creates an datepicker widget. For setup of custom locals use the head tag.

Samples

Datepicker with different formats

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
	<sj:head />
  </head>
  <body>
	<s:form id="form" theme="xhtml">
	  <sj:datepicker id="date0" label="Select a Date" />
	  <sj:datepicker value="%{dateValue}" id="date1" name="date1" label="Date Value from Action" />
	  <sj:datepicker id="date2" name="nameValue" label="Date Value by Name" />
	  <sj:datepicker value="today" id="date3" name="date3" displayFormat="dd.mm.yy" label="Today" />
	  <sj:datepicker value="yesterday" id="date4" name="date4" displayFormat="mm/dd/yy" label="Yesterday" />
	  <sj:datepicker value="tomorrow" id="date5" name="date5" displayFormat="DD, d MM yy" label="Tomorrow" />
	  <sj:datepicker value="2004-08-14" id="date6" name="date6" displayFormat="d M, yy" label="String Value" />
          <sj:datepicker  timepicker="true" id="date7" name="date7" timepickerStepMinute="15" timepickerOnly="true" timepickerFormat="h:mm TT" timepickerAmPm="true" label="Am Pm with 15 min step" />
	</s:form>
  </body>
</html>

Datepicker with different options and animations

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
	<sj:head locale="de" jquerytheme="lightness"/>
  </head>
  <body>
	<s:form id="form" theme="xhtml">
	  <sj:datepicker id="date0" name="date0" label="With Button Panel" showButtonPanel="true"/>
	  <sj:datepicker id="date1" name="date1" label="Change Month and Year" changeMonth="true" changeYear="true"/>
	  <sj:datepicker id="date2" name="date2" label="Custom Button Text" showOn="both" buttonText="Select a Date"/>
	  <sj:datepicker id="date3" name="date3" label="Show only on Button Click" showOn="button"/>
	  <sj:datepicker id="date4" name="date4" label="Text after selection" appendText=" (dd.MM.yy)" displayFormat="dd.MM.yy"/>
	  <sj:datepicker id="date5" name="date5" label="With fast slideDown Animation" showAnim="slideDown" duration="fast"/>
	  <sj:datepicker id="date6" name="date6" label="With slow fadeIn Animation" showAnim="fadeIn" showOptions="{direction: 'up' }" duration="slow" />
	  <sj:datepicker id="date7" name="date7" label="Show 3 Months" numberOfMonths="3"/>
	  <sj:datepicker id="date8" name="date8" label="Show Month Array" numberOfMonths="[2,3]"/>
	  <sj:datepicker id="date9" name="date9" label="Show Years only from 2008 until 2012" yearRange="2008:2012" changeYear="true"/>
	  <sj:datepicker id="date10" name="date10" label="Button Only" buttonImageOnly="true"/>
	  <sj:datepicker id="date11" name="date11" label="Without Button" showOn="focus"/>
	  <sj:datepicker id="date12" name="date12" label="With Close Event" onClose="onClose"/>
	</s:form>
  </body>
</html>

Datepicker with timepicker addon

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
	<sj:head locale="de" jquerytheme="lightness"/>
  </head>
  <body>
	<s:form id="form" theme="xhtml">
	  <sj:datepicker id="time0" label="Select a Date/Time" value="%{new java.util.Date()}" timepicker="true" />
	  <sj:datepicker id="time1" label="Select a Time" value="%{new java.util.Date()}" timepicker="true" timepickerOnly="true"/>
	  <sj:datepicker id="time2" label="With AM/PM" timepicker="true" timepickerAmPm="true"/>
	  <sj:datepicker id="time3" label="Show Seconds" timepicker="true" timepickerShowSecond="true" timepickerFormat="hh:mm:ss"/>
	  <sj:datepicker id="time4" label="With Steps" timepicker="true" timepickerShowSecond="true" timepickerFormat="h:m:s" timepickerStepHour="2" timepickerStepMinute="10" timepickerStepSecond="15"/>
	  <sj:datepicker id="time5" label="With Seperator" timepicker="true" timepickerSeparator=" at "/>
	  <sj:datepicker id="time6" label="With Grid" timepicker="true" timepickerOnly="true" timepickerGridHour="4" timepickerGridMinute="10" timepickerStepMinute="10"/>
	</s:form>
  </body>
</html>

Topics

Topic Event Parameter
onBeforeTopics beforeShow event.originalEvent.input, event.originalEvent.inst
onBeforeShowDayTopics beforeShowDay event.originalEvent.date
onChangeMonthYearTopics onChangeMonthYear event.originalEvent.year, event.originalEvent.month, event.originalEvent.inst
onChangeTopics onSelect event.originalEvent.dateText, event.originalEvent.inst
onCompleteTopics onClose event.originalEvent.dateText, event.originalEvent.inst

Attributes

Name

Required

Default

Evaluated

Type

Description
accesskey false false String Set the html accesskey attribute on rendered html element
appendText false false String The text to display after each date field, e.g. to show the required format. Default: ''
buttonImage false false String Path to image for calender button. e.g. images/calendar.gif
buttonImageOnly false false false Boolean Set to true to place an image after the field to use as the trigger without it appearing on a button. Default: false
buttonText false false String The text to display on the trigger button. Use in conjunction with showOn equal to 'button' or 'both'. Default: '...'
changeMonth false false false Boolean Show select box for change months. true or false
changeYear false false false Boolean Show select box for change years. true or false
cssClass false false String The css class to use for element
cssErrorClass false false String The css error class to use for element
cssErrorStyle false false String The css error style definitions for element to use
cssStyle false false String The css style definitions for element to use
disabled false false String Set the html disabled attribute on rendered html element
displayFormat false yy-mm-dd false String A pattern used for the visual display of the formatted date, e.g. yy-mm-dd , dd.mm.yy
duration false false String Control the speed at which the datepicker appears, it may be a time in milliseconds, a string representing one of the three predefined speeds ('slow', 'normal', 'fast'). Default: 'normal'
errorPosition false false String Define error position of form element (top|bottom)
firstDay false false String Set the first day of the week: Sunday is 0, Monday is 1, ... . Default: 0
id false false String HTML id attribute
inline false false false Boolean Display the Datepicker inline. Default: false
javascriptTooltip false false false Boolean Use JavaScript to generate tooltips
key false false String Set the key (name, value, label) for this particular component
label false false String Label expression used for rendering an element specific label
labelSeparator false : false String String that will be appended to the label
labelposition false false String Define label position of form element (top/left)
maxDate false false String Set a maximum selectable date via a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'). Can also be a Java Date Object.
maxlength false false Integer HTML maxlength attribute
minDate false false String Set a minimum selectable date via a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'). Can also be a Java Date Object.
name false false String The name to set for element
numberOfMonths false false String Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display. e.g. 3 or an array like [2, 3]. Default: 1
onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics false false String A comma delimited list of topics that published always
onBeforeShowDayTopics false false String A comma delimited list of topics that published for each day in the datepicker before is it displayed.
onBeforeTopics false false String Topics that are published before a load
onBlurTopics false false String A comma delimited list of topics that published when the element is blured
onChangeMonthYearTopics false false String A comma delimited list of topics that published when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.
onChangeTopics false false String A comma delimited list of topics that published when the element changed
onCompleteTopics false false String A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided)
onDisableTopics false false String A comma delimited list of topics that published when the element disabled
onEnableTopics false false String A comma delimited list of topics that published when the element is enabled
onErrorTopics false false String A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided)
onFocusTopics false false String A comma delimited list of topics that published when the element is focused
onSuccessTopics false false String A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided)
onblur false false String Set the html onblur attribute on rendered html element
onchange false false String Set the html onchange attribute on rendered html element
onclick false false String Set the html onclick attribute on rendered html element
ondblclick false false String Set the html ondblclick attribute on rendered html element
onfocus false false String Set the html onfocus attribute on rendered html element
onkeydown false false String Set the html onkeydown attribute on rendered html element
onkeypress false false String Set the html onkeypress attribute on rendered html element
onkeyup false false String Set the html onkeyup attribute on rendered html element
onmousedown false false String Set the html onmousedown attribute on rendered html element
onmousemove false false String Set the html onmousemove attribute on rendered html element
onmouseout false false String Set the html onmouseout attribute on rendered html element
onmouseover false false String Set the html onmouseover attribute on rendered html element
onmouseup false false String Set the html onmouseup attribute on rendered html element
onselect false false String Set the html onselect attribute on rendered html element
openTemplate false false String Set template to use for opening the rendered html.
parentTheme false false String The parent theme. Default: value of parent form tag or simple if no parent form tag is available
readonly false false false Boolean Whether the input is readonly
requiredLabel false false false Boolean If set to true, the rendered element will indicate that input is required
requiredPosition false false String Define required position of required form element (left|right)
showAnim false false String Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', or any of the show/hide jQuery UI effects. Default: 'show'
showButtonPanel false false false Boolean Show button panel in the calender. true or false
showOn false false String Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both'). Default: 'both'
showOptions false false String If using one of the jQuery UI effects for showAnim, you can provide additional settings for that animation via this option. e.g. {direction: 'up' }. Default: '-10:+10'
size false false Integer HTML size attribute
tabindex false false String Set the html tabindex attribute on rendered html element
template false false String The template (other than default) to use for rendering the element
templateDir false false String The template directory.
timepicker false false false Boolean Add Timepicker to the current Datepicker instance
timepickerAmPm false false false Boolean Show time in AM/PM 12 hour format
timepickerCloseText false Done false String Localization
timepickerCurrentText false Now false String Localization
timepickerFormat false hh:mm tt false String Time Format. e.g. hh:mm tt or h:m
timepickerGridHour false false Integer To show numbered grids under the hour slider.
timepickerGridMinute false false Integer To show numbered grids under the minute slider.
timepickerGridSecond false false Integer To show numbered grids under the second slider.
timepickerHourText false Hour false String Localization
timepickerMinuteText false Minute false String Localization
timepickerOnly false false false Boolean Show only the Timepicker
timepickerSecondText false Second false String Localization
timepickerSeparator false SPACE false String Place holder between date and time.
timepickerShowHour false true false Boolean Show the hour
timepickerShowMinute false true false Boolean Show the minute
timepickerShowSecond false false false Boolean Show the second
timepickerStepHour false false Integer Hour steps. e.g. 2
timepickerStepMinute false false Integer Minute steps. e.g. 15 for 15, 30, 45 steps
timepickerStepSecond false false Integer Second steps
timepickerTimeOnlyTitle false Choose Time false String Localization
timepickerTimeText false Time false String Localization
title false false String Set the html title attribute on rendered html element
tooltip false false String Set the tooltip of this particular component
tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips
tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath false false String Icon path used for image that will have the tooltip
value false false String Preset the value of input element
yearRange false false String Control the range of years displayed in the year drop-down: either relative to current year (-nn:+nn) or absolute (nnnn:nnnn). Default: '-10:+10'
zindex false false String The z-index for the datepicker, usefull when run in a dialog e.g. 2006.

Struts Project Page - Showcase - Showcase Grid - Download - Developer Blog - Developer News

Clone this wiki locally