Home > Guides > Tag Developers Guide > Struts Tags > Tag Reference > UI Tag Reference > datetimepicker

To use this tag:

  • Add: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %> to your page.
  • The head tag must be included on the page, which can be configured for performance or debugging purposes.
  • If the parseContent parameter for the head tag is false (it is false by default), then the id tag is required.

Additional Examples


For more examples see Ajax and JavaScript Recipes


Renders a date/time picker in a dropdown container.

A stand-alone DateTimePicker widget that makes it easy to select a date/time, or increment by week, month, and/or year.

It is possible to customize the user-visible formatting with either the 'formatLength' (long, short, medium or full) or 'displayFormat' attributes. By defaulty current locale will be used.

Syntax supported by 'displayFormat' is (http://www.unicode.org/reports/tr35/tr35-4.html#Date_Format_Patterns):-

dDay of the month
DDay of year
MMonth - Use one or two for the numerical month, three for the abbreviation, or four for the full name, or 5 for the narrow name.
hHour [1-12].
HHour [0-23].
mMinute. Use one or two for zero padding.
sSecond. Use one or two for zero padding.

The value sent to the server is a locale-independent value, in a hidden field as defined by the name attribute. The value will be formatted conforming to RFC3 339 (yyyy-MM-dd'T'HH:mm:ss)

The following formats(in order) will be used to parse the values of the attributes 'value', 'startDate' and 'endDate':

  • SimpleDateFormat built using RFC 3339 (yyyy-MM-dd'T'HH:mm:ss)
  • SimpleDateFormat.getTimeInstance(DateFormat.SHORT)
  • SimpleDateFormat.getDateInstance(DateFormat.SHORT)
  • SimpleDateFormat.getDateInstance(DateFormat.MEDIUM)
  • SimpleDateFormat.getDateInstance(DateFormat.FULL)
  • SimpleDateFormat.getDateInstance(DateFormat.LONG)
  • SimpleDateFormat built using the value of the 'displayFormat' attribute(if any)


Dynamic Attributes Allowed:








accesskeyfalsefalseStringSet the html accesskey attribute on rendered html element
adjustWeeksfalsefalsefalseBooleanIf true, weekly size of calendar changes to acomodate the month if false, 42 day format is used
cssClassfalsefalseStringThe css class to use for element
cssErrorClassfalsefalseStringThe css error class to use for element
cssErrorStylefalsefalseStringThe css error style definitions for element to use
cssStylefalsefalseStringThe css style definitions for element to use
dayWidthfalsenarrowfalseStringHow to render the names of the days in the header(narrow, abbr or wide)
disabledfalsefalseStringSet the html disabled attribute on rendered html element
displayFormatfalsefalseStringA pattern used for the visual display of the formatted date, e.g. dd/MM/yyyy
displayWeeksfalse6falseIntegerTotal weeks to display
endDatefalse2941-10-12falseDateLast available date in the calendar set
errorPositionfalsefalseStringDefine error position of form element (top|bottom)
formatLengthfalseshortfalseStringType of formatting used for visual display. Possible values are long, short, medium or full
iconPathfalsefalseStringPath to icon used for the dropdown
idfalsefalseStringHTML id attribute
javascriptTooltipfalsefalsefalseBooleanUse JavaScript to generate tooltips
keyfalsefalseStringSet the key (name, value, label) for this particular component
labelfalsefalseStringLabel expression used for rendering an element specific label
labelSeparatorfalse:falseStringString that will be appended to the label
labelpositionfalsefalseStringDefine label position of form element (top/left)
languagefalsebrower's specified preferred languagefalseStringLanguage to display this widget in
namefalsefalseStringThe name to set for element
onblurfalsefalseString Set the html onblur attribute on rendered html element
onchangefalsefalseStringSet the html onchange attribute on rendered html element
onclickfalsefalseStringSet the html onclick attribute on rendered html element
ondblclickfalsefalseStringSet the html ondblclick attribute on rendered html element
onfocusfalsefalseStringSet the html onfocus attribute on rendered html element
onkeydownfalsefalseStringSet the html onkeydown attribute on rendered html element
onkeypressfalsefalseStringSet the html onkeypress attribute on rendered html element
onkeyupfalsefalseStringSet the html onkeyup attribute on rendered html element
onmousedownfalsefalseStringSet the html onmousedown attribute on rendered html element
onmousemovefalsefalseStringSet the html onmousemove attribute on rendered html element
onmouseoutfalsefalseStringSet the html onmouseout attribute on rendered html element
onmouseoverfalsefalseStringSet the html onmouseover attribute on rendered html element
onmouseupfalsefalseStringSet the html onmouseup attribute on rendered html element
onselectfalsefalseStringSet the html onselect attribute on rendered html element
requiredLabelfalsefalsefalseBooleanIf set to true, the rendered element will indicate that input is required
requiredPositionfalsefalseStringDefine required position of required form element (left|right)
startDatefalse1492-10-12falseDateFirst available date in the calendar set
staticDisplayfalsefalsefalseBooleanDisable all incremental controls, must pick a date in the current display
stylefalsefalseStringThe css style definitions for element to use - it's an alias of cssStyle attribute.
tabindexfalsefalseStringSet the html tabindex attribute on rendered html element
templatefalsefalseStringThe template (other than default) to use for rendering the element
templateCssPathfalsefalseStringTemplate css path
templateDirfalsefalseStringThe template directory.
titlefalsefalseStringSet the html title attribute on rendered html element
toggleDurationfalse100falseIntegerDuration of toggle in milliseconds
toggleTypefalseplainfalseStringoggle type of the dropdown. Possible values are plain,wipe,explode,fade
tooltipfalsefalseStringSet the tooltip of this particular component
tooltipConfigfalsefalseStringDeprecated. Use individual tooltip configuration attributes instead.
tooltipCssClassfalseStrutsTTClassicfalseStringCSS class applied to JavaScrip tooltips
tooltipDelayfalseClassicfalseStringDelay in milliseconds, before showing JavaScript tooltips
tooltipIconPathfalsefalseStringIcon path used for image that will have the tooltip
typefalsedatefalseStringDefines the type of the picker on the dropdown. Possible values are 'date' for a DateTimePicker, and 'time' for a timePicker
valuefalsefalseStringPreset the value of input element
valueNotifyTopicsfalsefalseStringComma delimmited list of topics that will published when a value is selected
weekStartsOnfalse0falseIntegerAdjusts the first day of the week 0==Sunday..6==Saturday


Getting and getting the datetimepicker value, from JavaScript:

Publish topic when value changes