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.
Dates attributes passed in the `RFC 3339` format: Renders date/time picker element. Format supported by this component are:-Format | Description |
#dd | Display day in two digits format |
#d | Try to display day in one digit format, if cannot use 2 digit format |
#MM | Display month in two digits format |
#M | Try to display month in one digits format, if cannot use 2 digit format |
#yyyy | Display year in four digits format |
#yy | Display the last two digits of the yaer |
#y | Display the last digits of the year |
It is possible to customize the user-visible formatting with either the formatLength or displayFormat attributes. The value sent to the server is typically a locale-independent value in a hidden field as defined by the name attribute. RFC3339 representation is used by default, but other options are available with saveFormat
ExamplesExample 1: <s:datetimepicker name="order.date" label="Order Date" /> Example 2: <s:datetimepicker name="delivery.date" label="Delivery Date" format="#yyyy-#MM-#dd" />The css could be changed by using the following :-
<s:datetimepicker name="birthday" label="Birthday" templateCss="...." />
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':
<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'}"/><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> <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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|