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

Apache Struts 2 Documentation
datetimepicker
Edit Page Browse Space Add Page Add News
Icon

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

Icon

For more examples see Ajax and JavaScript Recipes

## Description

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):-

Format | Description
d | Day of the month
D | Day of year
M | Month - Use one or two for the numerical month, three for the abbreviation, or four for the full name, or 5 for the narrow name.
y | Year
h | Hour [1-12].
H | Hour [0-23].
m | Minute. Use one or two for zero padding.
s | Second. 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)

## Parameters

#### Dynamic Attributes Allowed: false
#### Name | #### Required | #### Default | #### Evaluated | #### Type | #### Description
--- | --- | --- | --- | --- | ---
accesskey | false |  | false | String | Set the html accesskey attribute on rendered html element
adjustWeeks | false | false | false | Boolean | If true, weekly size of calendar changes to acomodate the month if false, 42 day format is used
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
dayWidth | false | narrow | false | String | How to render the names of the days in the header(narrow, abbr or wide)
disabled | false |  | false | String | Set the html disabled attribute on rendered html element
displayFormat | false |  | false | String | A pattern used for the visual display of the formatted date, e.g. dd/MM/yyyy
displayWeeks | false | 6 | false | Integer | Total weeks to display
endDate | false | 2941-10-12 | false | Date | Last available date in the calendar set
errorPosition | false |  | false | String | Define error position of form element (top|bottom)
formatLength | false | short | false | String | Type of formatting used for visual display. Possible values are long, short, medium or full
iconPath | false |  | false | String | Path to icon used for the dropdown
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)
language | false | brower's specified preferred language | false | String | Language to display this widget in
name | false |  | false | String | The name to set for element
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
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)
startDate | false | 1492-10-12 | false | Date | First available date in the calendar set
staticDisplay | false | false | false | Boolean | Disable all incremental controls, must pick a date in the current display
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
templateCssPath | false |  | false | String | Template css path
templateDir | false |  | false | String | The template directory.
title | false |  | false | String | Set the html title attribute on rendered html element
toggleDuration | false | 100 | false | Integer | Duration of toggle in milliseconds
toggleType | false | plain | false | String | oggle type of the dropdown. Possible values are plain,wipe,explode,fade
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
type | false | date | false | String | Defines the type of the picker on the dropdown. Possible values are 'date' for a DateTimePicker, and 'time' for a timePicker
value | false |  | false | String | Preset the value of input element
valueNotifyTopics | false |  | false | String | Comma delimmited list of topics that will published when a value is selected
weekStartsOn | false | 0 | false | Integer | Adjusts the first day of the week 0==Sunday..6==Saturday

## Examples

Getting and getting the datetimepicker value, from JavaScript:

Publish topic when value changes