Calendar

Table of Contents Overview HTML Example Advanced Scripting Options Events Properties Events, Properties and Methods Examples

Overview

This widget attaches a calendar control to the spec control input. The user is then able to browse through the calendar and select a date from a visual perspective. The text representation is controlled by the selection of the calendar helping to enforce date formatting requirements. Events are exposed that allow you to write code against the widget. A number of properties are exposed to allow for easy parsing of date items such as the day of the week.

HTML Example

<span class="Calendar">[[Date]]</span>

Advanced Scripting

<div>[[Date]]</div>
spec['Date'].calendar({
	width: "80", 
	format: "DayOfWeek"
});

Options

• width: Numeric value for the width of the input control.
• format: The value format of the selection. Choices include: Year, Month, DayOfMonth, DayOfWeek, FullDate. If not set the value format mask is MM/DD/YYYY.

Events

onChange(): Triggered when the values changes and the control loses focus.

Properties

• value(): Returns the value of the control based on the format defined in options.
• fullDate(): Returns the full date value of the selected date. Ex: Thu Nov 27 2008 09:22:42 GMT-0600 (Central Standard Time).
• dayOfMonth(): Returns the numeric representation of the selected day of the month. Ex: 20.
• dayOfWeek(): Returns the string representation of the selected day of the week. Ex: Monday).
• month(): Returns the text representation of the selected month. Ex: July.
• year(): Returns the numeric representation of the selected year. Ex: 2008.

Events, Properties and Methods Examples

spec['Date'].calendar.fullDate();
spec['Date'].calendar.onChange = function() {
	alert(spec['Date'].calendar.value());
}