Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > Tag Reference > UI Tag Reference > datetimepicker
Added by Jay Bose, last edited by Musachy Barroso on Sep 22, 2007  (view change)

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

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

<sx:datetimepicker name="order.date" label="Order Date" />
<sx:datetimepicker name="delivery.date" label="Delivery Date" displayFormat="yyyy-MM-dd"  />
<sx:datetimepicker name="delivery.date" label="Delivery Date" value="%{date}"  />
<sx:datetimepicker name="delivery.date" label="Delivery Date" value="%{'2007-01-01'}"  />
<sx:datetimepicker name="order.date" label="Order Date" value="%{'today'}"/>

Getting and getting the datetimepicker value, from JavaScript:

<sx:datetimepicker id="picker" label="Order Date" />
<script type="text/javascript">
  function setValue() {
     var picker = dojo.widget.byId("picker");
     
     //string value
     picker.setValue('2007-01-01');
     
     //Date value
     picker.setValue(new Date());
  }
  
  function showValue() {
     var picker = dojo.widget.byId("picker");
     
     //string value
     var stringValue = picker.getValue();
     alert(stringValue);
     
     //date value
     var dateValue = picker.getDate();
     alert(dateValue);
  }
</script>

Publish topic when value changes

<sx:datetimepicker id="picker" label="Order Date" valueNotifyTopics="/value"/>

<script type="text/javascript">
dojo.event.topic.subscribe("/value", function(textEntered, date, widget){
    alert('value changed');
    //textEntered: String enetered in the textbox
    //date: JavaScript Date object with the value selected
    //widet: widget that published the topic 
});
</script>