Edit on GitHub

# datetimepicker

> NOTE: Ajax template (Dojo plugin) is deprecated and won’t be supported any longer.

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) </ul> </p> __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
  style | false |  | false | String | The css style definitions for element to use - it's an alias of cssStyle 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
  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__ ```xml ``` Getting and getting the datetimepicker value, from JavaScript: ```xml
  ``` Publish topic when value changes ```xml
  ```