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

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

Name	Required	Default	Evaluated	Type	Description
Dynamic Attributes Allowed: false

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>

Description

Parameters

Dynamic Attributes Allowed:

Name

Required

Default

Evaluated

Type

Description

Examples