Updated Oct 09, 2009 by johgep
Labels:	Phase-Implementation

DatePickerTag

A tag that creates an Datepicker.

Introduction

For 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 jqueryui="true"/>
  </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" />
    </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 jqueryui="true" 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>

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'

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

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)

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 3. Default: 1

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.

required 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'

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.

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.