WebSquare.uiplugin.inputCalendar

InputCalendar. A combination of Calendar and InputBox components. Provides functions of both Calendar and InputBox components.
The end user can select a date from the calendar or directly enter the date.
Provides features such as validation (validCheck) and year range setting (minYear/maxYear).
Various tags are used under the <div> tag at the highest level.

Type

uiplugin

Property Summary

alt: String for the alt property in HTML. Mandatory for web accessibility.
autoFocus: [default: false, true] When the maxByteLength is reached with the nextTabID being defined, automatically moves the focus.
buttonTitle: Adds the title to the calendar image.
calendarClass: [default:class1, class2, class3, class4, class5] Skin type of the calendar.
calendarDisplayFormat: Sets the displaying format of the date on the calendar regardless of the displayFormat of the InputCalendar.
calendarDisplayFormatFunc: Receives the name of the function, and sets the calendarDisplayFormat with the return of the function. Sends the calendarValueType as a parameter when calling the function.
calendarImage: Path of the calendar image file
calendarImageOver: Path of the image file to be displayed upon the end user's hovering the mouse over the calendar button
calendarValueType: [default:yearMonthDate, yearMonth, year, yearMonthDateHour, yearMonthDateTime, yearMonthDateTimeSec] Defines the date format of the calendar.
cancelButtonShow: [default:false, true] Shows the Cancel (X) button on the lower-right corner of the component.
caption: Sets the caption tag in HTML. (The Calendar component uses the table tag.)
class: Same as the class property in HTML. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
dateValidCheck: Validates the currently inputted date. [default: false, true]
dateValidSet: Validates the inputted date. If not valid, goes back to the previous value. [default: false, true]
dateValidSetCustom: In case invalid data is entered, only the invalidMessageFunc will be called. [default: false, true]
defaultDate: The date initially displayed upon the end user’s clicking the calendar icon. [Default: "" (Empty String)]
delimiter: [default: -] String to separate year, month, and day.
disabled: [default:false, true] Disabled status of the component.
disableDateValidSet: Upon a disabled date being entered, the previously entered date will be displayed upon blurring. [default: false, true]
displayDayType: Decides how to display days on the calendar in image or text. [default: image, text]
displayFormat: Date format for the input box. Ignores delimiters. (Example) yyyy/MM/dd , yyyy/MM/dd (EEE)
displayFormatFunc: Receives the name of the function, and sets the displayFormat with the return of the function. Sends the calendarValueType as a parameter when calling the function.
displaymessage: Displays the result message upon a validation failure by validate(); API. [default: false, true]
dynamicHeaderOrder: Decides the text order in the label for pickerType="dynamic".
editType: [default:select, focus] Defines the action to be triggered upon the end user’s clicking the component.
fixedDate: Fixes the present date as the starting date. (The end user's selection will be ignored.)
focusOnDateSelect: [default:false, true] Gives focus to the input box upon user's date selection on the mobile.
footerDiv: [default:false, true] Uses div tag instead of table tag to display the user-selected date on the calendar.
handleIconClick: Callback function to be called upon the end user's clicking the calendar icon.
id: Component ID
inputReadOnly: Sets the readOnly property.
invalidMessageFunc: Name of the user-defined function that will generate a message upon a validation failure by validate(); API.
ioFormat: [defulat:yyyyMMdd] Format to apply upon the end user's keyboard input (or getValue of inputCalendar).
keepFixedDate: Setting fixedDate = "today" will fix the date displayed at the lower part to the present date.
keepInvalidDate: Keeps the invalid date that failed the dateValidCheck in the input field.
mandatory: Makes input or selection mandatory. [default: false, true]
maxYear: The highest year in the calendar. The default is the maxYear value under calendar node in config.xml.
minYear: The lowest year in the calendar. The default is the minYear value under calendar node in config.xml.
monthNames: The names of the months. Separate month names by comma.
monthNamesForYearMonthType: When calendarvaluetype is yearMonth, sets the names of the months to be displayed on the selectbox. Separate month names by comma.
nextLastMonthDateSelect: Selects the corresponding date upon the end user’s clicking previous or next month on the calendar.
nextTabID: The ID of the component to be selected upon the end user’s pressing the Tab key.
outsideClickEvent: Event occurrence upon clicking outside the date selection area when the calendarValueType is yearMonth.
pickerType: Shows the Today button which displays the present date upon being clicked.
placeholder: Same as the placeholder property in HTML5. Displays additional info such as hints for the end user.
readOnly: [default:false, true] Current value of the readOnly property. Same as readonly in HTML.
ref: Value path of the DataCollection. Used with a purpose to bind a DataCollection with a WebSquare component.
renderDiv: [default:true, false] Calendar document rendering type (table or div).
renderType: [default:component, native] Decides the the layout structure rendering method.
rightAlign: Aligns the calendar to the right.
setCurrentDate: Displays the present date in the input box.
showPlaceHolderOnReadOnly: Displays the placeholder in the readOnly mode (readOnly="true").
showToday: Shows the Today button which displays the present date upon being clicked.
skipConfirm: [default: false, true] IF the user selects a month, the selection will be automatically set (without the Confirm button being displayed so that the user does not need to click the Confirm button.)
skipConfirmOnly: [default: false, true] The user can select a month by clicking arrow buttons such as << < > >> and the selected month will be automatically set. (The Confirm button will be displayed.)
summary: Similar to the summary property of the table tag in HTML.
tabIndex: The focusing order by the Tab key.
title: Same as the class property in HTML.
tooltip: Text to be displayed upon the end user’s hovering the mouse over the component.
tooltipLocaleRef: Text key of the tooltip in case the tooltip text is provided in multiple languages.
topLayout: [default: false, true] Moves Today and Close buttons to the top-right corner.
type: Same as the type tag in HTML.
useAnchor: Uses the anchor for book-marking. Valid only when the renderDiv (in lower versions where the InputCalendar was drawn as a table) is false.
useCalendarTabIndex: Allows focus moves by the tab key when the useAnchor is false.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
validateOnInput: [default:false] Validates user’s input using a keyboard. (Valid for IE9 or higher version browsers that support oninput event.)
validateRef: Executes the validation on the ref binding.
validator: Name of the validation function
validCheck: Displays an alert upon input of an invalid date.
visibleHourList: [default:1,2,...,23,24] Hour items. Use [,] as the delimiter.
visibleMinList: [default:1,2,...,59,60] Minute items. Use [,] as the delimiter.
visibleSecList: [default:1,2,...,59,60] Second items. Use [,] as the delimiter.
visibleWeekNum: Sets the number of the weeks to display on the calendar.
weekStartsOn: [default: 0, 1, 2, 3, 4, 5, 6] Starting day of the week (0: Sunday, ..., 6: Saturday)
wmode: [default:false, true] Displays the selection item list above the object tag using the wmode.
yearSuffix: String to be added after the year.

Event Summary

onblur: Triggered when the focus is lost.
onchange: Triggered upon a change in an inputted or selected value. Occurs at the point of focusing-out.
onclick: Triggered upon the end user's clicking the calendar.
ondateselect: Triggered upon the end user's selecting a date.
onfocus: Triggered upon the component being focused.
oniconclick: Triggered upon the end user's clicking the calendar icon.
onkeydown: Triggered upon the end user's pressing a key on the keyboard.
onkeypress: Triggered upon the end user's pressing a key (and maintaining the key being pressed) on the keyboard.)
onkeyup: Triggered upon the end user's releasing a key off the keyboard after pressing the key.
onmonthselect: Triggered upon change of the month.
onviewchange: Triggered when the value on the list is changed through keyboard input or mouse clicking.
onyearselect: Triggered upon change of the year.

Method Summary

addClass( className ): Adds a CSS class to the component.
bind( eventType , function ): Dynamically allocate an event and the handler function to the component.
blur( ): Blurs the input.
changeClass( oldClassName , newClassName ): Changes the class currently applied to the corresponding WebSquare component. (Supported in all WebSquare components.)
disableAfterDate( dateStr ): Disables the dates after the inputted date.
disableBeforeDate( dateStr ): Disables the dates before the inputted date.
disableDate( dateStr ): Disables certain dates.
disableValidate( ): When some dates are disabled by disableBeforeDate or disableAfterDate property or other methods,
enableAllDate( ): Enables the dates disabled by the properties of disableAfterDate and disableBeforeDate.
enableDate( dateStr ): Enables certain dates.
focus( ): Moves the focus to the input field.
getButtonTitle( ): Gets the value of the buttonTitle property.
getDataListInfo( ): Returns the dataList bound with the component.
getDefaultDate( ): Returns the current value of the defaultDate property.
getDisabled( ): Returns the current value of the disabled property.
getDisplayFormat( ): Returns the current value of the displayFormat property.
getDisplayValue( )
getFormattedValue( formatStr ): Returns the formatted value. In case the format is not specified, the value converted in displayFormat will be returned.
getGenerator( ): In case generated by the Generator component, returns the parent Generator object that created the component itself.
getID( ): Returns the ID of the WebSquare component.
getInitStyle( CSS ): Returns the initial style of the WebSquare component.
getIoFormat( ): Returns the current value of the ioFormat property.
getNextTabID( ): Returns the nextTabID value.
getOpacity( ): Returns the opacity of the WebSquare component. (Supported in all WebSquare components.)
getOriginalID( ): Returns the originalID of the WebSquare component. (Supported in all WebSquare components.)
getPluginName( ): Returns the name of the WebSquare component.
getPosition( positionName ): Returns the position (left and top) of the WebSquare component. (Supported in all WebSquare components.)
getReadOnly( ): Returns the current value of the readOnly property.
getScope( ): For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
getScopeWindow( ): For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
getSize( sizeName ): Sets the size (width and height) of the WebSquare component. (Supported in all WebSquare components.)
getStyle( propertyName ): Returns the CSS setting of the WebSquare component.
getStyleValue( style ): [deprecated]
getTitle( ): Gets the current value of the title property.
getUdcHome( ): Returns the path of the UDC file including the file name in which the UDC object is defined. (Supported in all WebSquare components.)
getUdcRoot( ): Returns the path of the UDC file in which the UDC object is defined. (Supported in all WebSquare components.)
getUserData( key ): Returns the value set by setUserData or directly defined by the user in the XML file.
getValue( ): Gets the value of the selected date without using delimiters.
hasClass( className ): Checks whether the WebSquare component has a certain class.
hide( ): Hides the WebSquare component. (Supported in all WebSquare components.)
removeClass( className ): Removes a class from the WebSquare component. (Supported in all WebSquare components.)
select( ): Selects the value based on the input.
setButtonTitle( ): Sets the buttonTitle property.
setCalendarValueType( calendarValueType , options ): Dynamically changes calendarValueType, displayFormat, and ioFormat.
setDefaultDate( dateStr ): Sets the defaultDate.
setDisabled( disabled ): Sets the disabled property.
setDisplayFormat( format ): Sets the received argument as the displayFormat.
setEventPause( evList , flag ): Pauses the event.
setHoliday( dateStr ): Sets a holiday to a certain date.
setHolidayRef( setHolidayRef ): Sets the holidayRef property. To bind with the DataCollection, add "data:" prefix.
setInitStyle( property ): Restores the initial style of the WebSquare component.
setInputReadOnly( readOnly ): Enables readOnly in the input box.
setIoFormat( ioFormat , displayFormat ): Sets ioFormat and displayFormat properties of the InputCalendar component.
setMaxYear( maxYear ): Dynamically sets the maxYear of the calendar.
setMinYear( minYear ): Dynamically sets the minYear of the calendar.
setNextTabID( componentID , componentScope ): Sets the nextTabID property.
setOpacity( value ): Sets the opacity in the WebSquare component. (Supported in all WebSquare components.)
setPlaceholder( placeholderStr ): Changes the placeholder property.
setPosition( left , top , mode ): Sets the position (left, top) of the WebSquare component.
setReadOnly( readOnly ): Controls the "readOnly" property.
setRef( ref ): Sets the ref property. Add “data:” prefix to bind with a DataCollection.
setSkin( skin ): Selects the skin to use.
setStyle( propertyName , value ): Sets the CSS of the WebSquare component.
setUserData( key , value ): Sets random data in the WebSquare component. (Supported in all WebSquare components.)
setValue( value ): Sets the value of the component.
setValueCancel( value ): Ignores the date being currently entered and displays the previously entered during a date being entered in the InputCalendar.
show( displayType ): Shows the WebSquare component on the page. (Supported in all WebSquare components.)
toggleClass( className ): Adds or removes a CSS class to or from a WebSquare component. (Supported in all WebSquare components.)
trigger( type , array ): Triggers the specified event in the WebSquare component.
unbind( type , function ): Removes the specified event from the WebSquare component.
unbindRef( ): Releases the ref binding.
validate( ): Validates the component according to the specified properties.
validateObject( ): Validates the component according to the specified properties.
visible( flag ): [deprecated]

Property Detail

alt: String for the alt property in HTML. Mandatory for web accessibility.
autoFocus: [default: false, true] When the maxByteLength is reached with the nextTabID being defined, automatically moves the focus.
In case a Korean character is entered, the focus will move upon additional entering after completion of the intended entering.
(This is because the maxByte is reached before the complete character is made in Korean alphabet input. Additional entering after a Korean character completion will trigger maxByte and move the focus to the nextTabID.)
buttonTitle: Adds the title to the calendar image.
Displays the title as a tooltip upon the user’s moving the mouse over the calendar image. Generally used to support web accessibility.
calendarClass: [default:class1, class2, class3, class4, class5] Skin type of the calendar.
calendarDisplayFormat: Sets the displaying format of the date on the calendar regardless of the displayFormat of the InputCalendar.
calendarDisplayFormatFunc: Receives the name of the function, and sets the calendarDisplayFormat with the return of the function. Sends the calendarValueType as a parameter when calling the function.
Will be ignored when the displayFormat is defined.
calendarImage: Path of the calendar image file
calendarImageOver: Path of the image file to be displayed upon the end user's hovering the mouse over the calendar button
calendarValueType: [default:yearMonthDate, yearMonth, year, yearMonthDateHour, yearMonthDateTime, yearMonthDateTimeSec] Defines the date format of the calendar.
cancelButtonShow: [default:false, true] Shows the Cancel (X) button on the lower-right corner of the component.
Click the button to close the calendar.
caption: Sets the caption tag in HTML. (The Calendar component uses the table tag.)
Mostly used for web accessibility.
class: Same as the class property in HTML. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
InputCalendar has complicated structure so that it is recommended to control the classes of lower-node tags.
dateValidCheck: Validates the currently inputted date. [default: false, true]
Validates the entered date (such as length, year, month, date, or leap year).
dateValidSet: Validates the inputted date. If not valid, goes back to the previous value. [default: false, true]
Define the validation function and set as the validator property.
dateValidSetCustom: In case invalid data is entered, only the invalidMessageFunc will be called. [default: false, true]
Does not display alerts in case of validCheck="true" and dateValidCheck="true".
Valid only for dateValidSet="true".
defaultDate: The date initially displayed upon the end user’s clicking the calendar icon. [Default: "" (Empty String)]
The date format must follow the calendarValueType.
If not specified, the current date will be displayed on the calendar. Executing getDefaultDate(); will return an empty string.
delimiter: [default: -] String to separate year, month, and day.
disabled: [default:false, true] Disable the component.
disableDateValidSet: Upon a disabled date being entered, the previously entered date will be displayed upon blurring. [default: false, true]
Triggered upon a date disabled by disableBeforeDate or disableAfterDate being entered.
displayDayType: Decides how to display days on the calendar in image or text. [default: image, text]
displayFormat: Date format for the input box. Ignores delimiters. (Example) yyyy/MM/dd , yyyy/MM/dd (EEE)
If the user's input sequence is not yyyyMMdd, use a different ioFormat. (Example) dd/MM/yyyy
displayFormatFunc: Receives the name of the function, and sets the displayFormat with the return of the function. Sends the calendarValueType as a parameter when calling the function.
Will be ignored when the displayFormat is defined.
displaymessage: Displays the result message upon a validation failure by validate(); API. [default: false, true]
Displays an internally defined message.
dynamicHeaderOrder: Decides the text order in the label for pickerType="dynamic". [default: month, year]
editType: [default:focus, select] Defines the action to be triggered upon the end user’s clicking the component.
fixedDate: Fixes the present date as the starting date. (The end user's selection will be ignored.)
focusOnDateSelect: [default:false, true] Gives focus to the input box upon user's date selection on the mobile.
footerDiv: [default:false, true] Uses div tag instead of table tag to display the user-selected date on the calendar.
handleIconClick: Callback function to be called upon the end user's clicking the calendar icon.
id: Component ID
The component ID is allocated as a global object. The script can access each object through the component ID.
inputReadOnly: Allows reading only. [default: false, true]
invalidMessageFunc: Name of the user-defined function that will generate a message upon a validation failure by validate(); API.
Valid only for displaymessage="true".
ioFormat: [defulat:yyyyMMdd] Format to apply upon the end user's keyboard input (or getValue of inputCalendar). ('y','M','d','H','m') Only strings are allowed.
keepFixedDate: Setting fixedDate = "today" will fix the date displayed at the lower part to the present date.
true : When fixedDate is "today", the present date will be always displayed at the lower part.
false : Even when fixedDate is"today", the date selected by the end user will be displayed at the lower part.
keepInvalidDate: Keeps the invalid date that failed the dateValidCheck in the input field.
mandatory: Makes input or selection mandatory. [default: false, true]
The validation function checks the mandatory fields.
maxYear: The highest year in the calendar. The default is the maxYear value under calendar node in config.xml.
(Example)
minYear: The lowest year in the calendar. The default is the minYear value under calendar node in config.xml.
(Example)
monthNames: The names of the months. Separate month names by comma.
ex) Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
monthNamesForYearMonthType: When calendarvaluetype is yearMonth, sets the names of the months to be displayed on the selectbox. Separate month names by comma.
ex) Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
nextLastMonthDateSelect: Selects the corresponding date upon the end user’s clicking previous or next month on the calendar. [default: false, true]
nextTabID: The ID of the component to be selected upon the end user’s pressing the Tab key.
outsideClickEvent: Event occurrence upon clicking outside the date selection area when the calendarValueType is yearMonth.
pickerType: Shows the Today button which displays the present date upon being clicked. [default: selectbox, dynamic]
placeholder: Same as the placeholder property in HTML5. Displays additional info such as hints for the end user.
When nothing is entered, the placeholder will be displayed. Upon end user’s input, the placeholder will disappear.
Depends on the browser. (Example: Text will disappear upon focusing in IE while text will disappear upon text input in Chrome.)
readOnly: [default:false, true] Current value of the readOnly property. Same as readonly in HTML.
Applied to both the calendar icon and the input box. To set readOnly only in the input box, use inputReadOnly.
ref: Value path of the DataCollection. Used with a purpose to bind a DataCollection with a WebSquare component.
(Format: data: [DataCollection ID].[Key id or Column id])
When bound with a DataList, the value of the selected row in the GridView will be bound.

Specify the XPath of the XML data to interface with the instance data.
renderDiv: [default: true, false] Calendar document rendering type (table or div).
renderType: [default:component, native] Decides the the layout structure rendering method.
component : Uses div and table tags. Not recommended for web accessibility.
native : Uses the select tag of HTML to display the select box and the button tags for numbers and buttons on the calendar. Recommended for web accessibility.
rightAlign: Aligns the calendar to the right.
setCurrentDate: Displays the present date in the input box.
showPlaceHolderOnReadOnly: Displays the placeholder in the readOnly mode (readOnly="true").
true: Display.
false (Default): Not display.
Related properties: readOnly, placeholder
showToday: Shows the Today button which displays the present date upon being clicked. [default: true, false]
skipConfirm: [default: false, true] IF the user selects a month, the selection will be automatically set (without the Confirm button being displayed so that the user does not need to click the Confirm button.)
true: Automatically set without the user’s clicking the Confirm button.
false (Default): Set upon the user’s clicking the Confirm button.
skipConfirmOnly: [default: false, true] The user can select a month by clicking arrow buttons such as << < > >> and the selected month will be automatically set. (The Confirm button will be displayed.)
true: Automatically set the selected month. (The Confirm button is displayed.)
false (Default): Set upon the user’s clicking the Confirm button after selecting a month.
summary: Similar to the summary property of the table tag in HTML. Mostly used to enhance web accessibility.
tabIndex: The focusing order by the Tab key.
Same as the tabindex property in HTML.
title: Same as the title property in HTML. The title is displayed upon the end user’s moving the mouse over the component. Generally used to support web accessibility.
tooltip: Text to be displayed upon the end user’s hovering the mouse over the component. Provided by WebSquare, and specifies additional information of the component.
tooltipLocaleRef: Text key of the tooltip in case the tooltip text is provided in multiple languages.
When there is no text for the key, "global_undefined" will be displayed on the screen.
topLayout: [default: false, true] Moves Today and Close buttons to the top-right corner.
true: Displays Today and Close buttons on the top-right corner. false: Displays in the original location (lower part of the component.)
type: Same as the type tag in HTML. [default:text]
useAnchor: Uses the anchor for book-marking. Valid only when the renderDiv (in lower versions where the InputCalendar was drawn as a table) is false.
To block the calendar-opening button from the sense reader users, set the useAnchor as false.
useCalendarTabIndex: Allows focus moves by the tab key when the useAnchor is false.
userData1: User-defined property. Use getUserData("userData3") to get the data.
userData2: User-defined property. Use getUserData("userData2") to get the data.
userData3: User-defined property. Use getUserData("userData3") to get the data.
validateOnInput: [default:false] Validates user’s input using a keyboard. (Valid for IE9 or higher version browsers that support oninput event.)
true: Validates user’s input through a keyboard. (Korean characters, alphabets, or other characters not representing a date are not allowed.)
false (Default): Does not validate input.
validateRef: Executes the validation on the ref binding. Related properties include validCheck, dateValidSet, and displaymessag.
validator: Name of the validation function
Runs the specified function upon blurring of the component.
The specified function is executed before the onblur event, and validates upon occurrence of blurring. The developer can change the value through the return.
validCheck: Displays an alert upon input of an invalid date. [default: false, true]
visibleHourList: [default:1,2,...,23,24] Hour items. Use [,] as the delimiter.
(ex) In case of calendarValueType="yearMonthDateTime", visibleHourList="5,10,15,20", [5,10,15,20] will be displayed.
visibleMinList: [default:1,2,...,59,60] Minute items. Use [,] as the delimiter.
(ex) In case of calendarValueType="yearMonthDateTime", visibleMinList="0,5,10,15,20,25,30,35,40,45,50,55", only the multiples of 5 will be displayed.
visibleSecList: [default:1,2,...,59,60] Second items. Use [,] as the delimiter.
(ex) In case of calendarValueType="yearMonthDateTime", visibleSecList="0,5,10,15,20,25,30,35,40,45,50,55", only multiples of 5 will be displayed.
visibleWeekNum: Sets the number of the weeks to display on the calendar.
weekStartsOn: [default: 0, 1, 2, 3, 4, 5, 6] Starting day of the week (0: Sunday, ..., 6: Saturday)
wmode: [default:false, true] Displays the selection item list above the object tag using the wmode.
To be used when the selection item list is hidden by objects (such as ActiveX, Flash, etc.)
Use wmode in the object (such as ActiveX, Flash, etc.) not in the component.
yearSuffix: String to be added after the year.
Enter $blank to use empty space.

Event Detail

onblur

Triggered when the focus is lost.

Parameter
name	type	description
e	Object	Event object

onchange

Triggered upon a change in an inputted or selected value. Occurs at the point of focusing-out.
A change made by the script will also trigger a change. Use the onviewchage event to compare old and new values.

onclick

Triggered upon the end user's clicking the calendar.

Parameter
name	type	description
e	Object	Event object

ondateselect

Triggered upon the end user's selecting a date.

Parameter
name	type	description
dateStr	String	Selected date
dateObj	Date	Date object of the selected date

Sample

// Parameters upon the end user's selecting 2002-Apr-15. dateStr : "20020415" (String object) dateObj : Mon Apr 15 2002 00:00:00 GMT+0900 (Date object)

onfocus

Triggered upon the component being focused.

Parameter
name	type	description
e	Object	Event object

oniconclick

Triggered upon the end user's clicking the calendar icon.

onkeydown

Triggered upon the end user's pressing a key on the keyboard.

Parameter
name	type	description
e	Object	Event object

onkeypress

Triggered upon the end user's pressing a key (and maintaining the key being pressed) on the keyboard.)

Parameter
name	type	description
e	Object	Event object

onkeyup

Triggered upon the end user's releasing a key off the keyboard after pressing the key.

Parameter
name	type	description
e	Object	Event object

onmonthselect

Triggered upon change of the month. Previous and selected months info is received.

Parameter
name	type	description
info	JSON	Returns JSON data containing oldValue and newValue.

Sample

// When the user select March from February info.oldValue : "2" info.newValue : "3"

onviewchange

Triggered when the value on the list is changed through keyboard input or mouse clicking.
In case the change was made by a script, the event will not be triggered. (Similar to the native onchange event.)

Parameter
name	type	description
info	JSON	Returns JSON data containing oldValue and newValue.

Sample

// Upon user's changing the date from 2002-Apr-15 to 2099-Dec-31. <script ev:event="onviewchange( info )"><![CDATA[ var oldValue = info.oldValue; //이전 값 //return 예시 ) "20020415" var newValue = info.newValue; //선택 된 값 //return 예시 ) "20991231" ]]></script>

onyearselect

Triggered upon change of the year. Previous and selected year info is received.

Parameter
name	type	description
info	JSON	Returns JSON data containing oldValue and newValue.

Sample

// When the user selects 2017 from2016 info.oldValue : "2017" info.newValue : "2016"

Method Detail

addClass( className )

Adds a CSS class to the component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
className	String	Y	Name of the class to add

Sample

// (Example) // Add oddClass to input1 component. input1.addClass("oddClass");

bind( eventType , function )

Dynamically allocate an event and the handler function to the component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
eventType	String	Y	Event to allocate
function	Function	Y	Handler function of the event

Sample

// (Example 1) // Define a function for the onclick event of input1. input1.bind("onclick", function(e){ alert(input1.getValue();})); // (Example 2) // Define commObj.ev_click function in advance. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; // Dynamically allocate onclick event and the handler function to input1 component. input1.bind("onclick", commObj.ev_click );

blur( )

Blurs the input.

Sample

inputCalendar1.blur();

changeClass( oldClassName , newClassName )

Changes the class currently applied to the corresponding WebSquare component. (Supported in all WebSquare components.)
Only the classes added by addClass can be changed.
In order to remove classes directly defined in the class propert of the WebSquare component, add the following in config.xml. // Add the following in config.xml.

Parameter
name	type	required	description
oldClassName	String	Y	Class to change
newClassName	String	Y	Class to newly use

Sample

// The class is directly defined in the inputBox component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following in config.xml. <style> <removeDefaultClass value="true" /> </style> // Change the class. // Change tmpInputClass class to tmpInputWarninClass. input1.changeClass("tmpInputClass","tmpInputWarninClass");

disableAfterDate( dateStr )

Disables the dates after the inputted date.

Parameter
name	type	required	description
dateStr	String	Y	Date after which dates will be disabled

Sample

// Enter in compliance with the ioFormat. // When the ioFormat is “yyyyMMdd”. inputCalendar.disableAfterDate("20170410"); // When the ioFormat is “ddMMyyyy”. inputCalendar.disableAfterDates("10042017"); // (Display) Dates after Aril 1 2017 will be disabled and cannot be selected.

disableBeforeDate( dateStr )

Disables the dates before the inputted date.

Parameter
name	type	required	description
dateStr	String	Y	Date before which dates will be disabled

Sample

// Enter in compliance with the ioFormat. // When the ioFormat is “yyyyMMdd”. inputCalendar.disableBeforeDate("20170410"); // When the ioFormat is “ddMMyyyy”. inputCalendar.disableBeforeDate("10042017"); // (Display) Dates before April 10 2017 will be disabled.

disableDate( dateStr )

Disables certain dates.

Parameter
name	type	required	description
dateStr	String	Y	Date(s) to disable

Sample

calendar1.disableDate("20160627 20180627"); // Or, in order to disable an entire year, use the following. calendar1.disableDate("*0627"); // (Result) Jun-27-2016 and June-27-2018 will be disabled on the calendar.

disableValidate( )

When some dates are disabled by disableBeforeDate or disableAfterDate property or other methods,
Judges whether the received date is ‘disabled’ or not, and returns the result.

Return
type	description
Boolean	Returns true if the entered date is disabled, or returns false.

Sample

Example: disableBeforeDate = "20170911" disableAfterDate = "20170927" var returnValue = inputCalendar1.disableValidate("20170901"); "true" will be returned.

enableAllDate( )

Enables the dates disabled by the properties of disableAfterDate and disableBeforeDate.

Sample

inputCalendar.enableAllDate(); // (Result) All disabled dates will be enabled and become selectable.

enableDate( dateStr )

Enables certain dates.

Parameter
name	type	required	description
dateStr	String	Y	Date(s) to enable

Sample

calendar1.enableDate("20160627 20180627"); // (Result) Jun-27-2016 and Jun-27-2018 will be enabled on the calendar. calendar1.enableDate("*"); // Enables all dates exept those disabled by the disableDate API.

focus( )

Moves the focus to the input field. Focusing may differs by browser.

Sample

inputCalendar1.focus(); // In case the input box has a value, the focus will be placed after the last character.

getButtonTitle( )

Gets the value of the buttonTitle property. The buttonTitle is the title value of the calendar image.

getDataListInfo( )

Returns the dataList bound with the component.

Return
type	description
Object	Returns nodeset, label, and value id as an object.

Sample

// Example inputCalendar1.getDataListInfo();

getDefaultDate( )

Returns the current value of the defaultDate property.
(defaultDate: Date to be displayed upon the end user’s clicking the calendar icon. If the defaultDate is not specified, the current system date will be displayed.)

Return
type	description
String	Current defaultDate

Sample

inputCalendar1.getDefaultDate(); // (Example 1) In case of defaultDate = "20101225", “20101225” will be returned. // (Example 2) In case the defaultDate is empty, an empty string will be returned.

getDisabled( )

Returns the current value of the disabled property. (Supported in all WebSquare components.)

Return
type	description
Boolean	Value of the disabled property

Sample

// (Example) Check the current value of the disabled property. var returnValue = componentId.getDisabled(); // (Return Example) false

getDisplayFormat( )

Returns the current value of the displayFormat property.

Return
type	description
String	Current displayFormat

Sample

// No displayFormat is specified. var returnValue = inputCalendar1.getDisplayFormat(); // (Return) "yyyy-MM-dd"

getDisplayValue( )

Return
type	description
String	Formatted value

Sample

// When the displayFormat of inputCalendar1 is "yyyy-MM-dd" and 20171123 is entered. var returnValue = inputCalendar1.getDisplayValue(); // (Return)"2017-11-23"

getFormattedValue( formatStr )

Returns the formatted value. In case the format is not specified, the value converted in displayFormat will be returned.

Parameter
name	type	required	description
formatStr	String	N	String to format

Return
type	description
String	Formatted value

Sample

// When no formatStr is specified. var returnValue1 = inputCalendar1.getFormattedValue(); // (Return) "2002-04-15" // A formatStr is given. var returnValue2 = inputCalendar1.getFormattedValue("dd-MM yyyy"); // (Return) "15-04 2002"

getGenerator( )

In case generated by the Generator component, returns the parent Generator object that created the component itself. (Supported in all WebSquare components.)

Return
type	description
Object	Parent Generator object

Sample

// (Example) The Generator (parent) create a Trigger (child). <w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator> // In the example below, upon the end user’s clicking the Trigger 1, the generator1 object will be displayed on the console. scwin.trigger1.onclick = function(){ console.log(this.getGenerator());}

getID( )

Returns the ID of the WebSquare component. (Supported in all WebSquare components.)

Return
type	description
String	WebSquare component ID

Sample

// Upon dynamically receiving a WebSquare component, the ID can be checked as shown below. function fn_validCheck(tmpObj){ var compID = tmpObj.getID(); } // If the tmpObj in the above example has "input1" ID. // (Return) "input1"

getInitStyle( CSS )

Returns the initial style of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
CSS	String	N	Property (If not specified, all properties will be displayed.)

getIoFormat( )

Returns the current value of the ioFormat property.

Return
type	description
String	The current value of the ioFormat property

Sample

// No ioFormat is specified. var returnValue = inputCalendar1.getIoFormat(); (Return) "yyyyMMdd"

getNextTabID( )

Returns the nextTabID value. (Related Property) nextTabID

Sample

// Example var nextTabID = inputCalendar1.getNextTabID();

getOpacity( )

Returns the opacity of the WebSquare component. (Supported in all WebSquare components.)
The Engine returns the opacity value of the CSS.

Return
type	description
Integer	Opacity

Sample

// Apply the opacity CSS to the InputBox component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> // Return the opacity of the InputBox. var returnValue = input1.getOpacity(); // A real number between 0 and 1 will be returned. // (Return) "0.2"

getOriginalID( )

Returns the originalID of the WebSquare component. (Supported in all WebSquare components.)
The originalID is valid when the scope function is in use.
For scope="true" WFrame, component IDs inside the WFrame is changed with the prefix(wframeID + "_") being added before the ID given by the user (originalID).
The originalID means the ID before the prefix being added.

Return
type	description
String	originalID of the component

Sample

// An example of multi-WFrame page // Main page with a WFrame (main.xml) <w2:wframe id="wframe1" src="text.xml" scope="true"/> // Source page to be contained in the WFrame (text.xml) <w2:textbox id="textbox1"/> // (Example) Check the Id and the original ID in the script of text.xml // Run getID. textbox1.getID(); // "wframe1_textbox1" is returned. // Run getOriginalID. textbox1.getOriginalID(); // "textbox1" is returned.

getPluginName( )

Returns the name of the WebSquare component. (Supported in all WebSquare components.)

Return
type	description
String	Name of the WebSquare component (pluginName)

Sample

// When a common function dynamically receives a WebSQuare object as shown below, different actions can be made for each component type. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); // Component ID var tmpCompType = tmpObj.getPluginName(); // Component name if(tmpCompType == "input"){ //..Logic.. }else if(tmpCompType == "gridView"){ //..Logic .. }else{ //..Logic.. } };

getPosition( positionName )

Returns the position (left and top) of the WebSquare component. (Supported in all WebSquare components.)
When the position is set in 0%, the value will be converted into %.

Parameter
name	type	required	description
positionName	String	Y	[left, top] Position type

Return
type	description
Number	Position of the component

Sample

// CSS margin is applied to the Input component as shown below. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> // (Example) Check the top value of the InputBox. var returnValue = input1.getPosition("top"); // Position value in pixels will be returned. // (Return) 10

getReadOnly( )

Returns the current value of the readOnly property. (Supported in all WebSquare components.)

Return
type	description
Boolean	The current setting of the readOnly property

Sample

// Example to check the readOnly setting of the component. var returnValue = componentId.getReadOnly(); // (Return Example) false

getScope( )

For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
For scope="true" WFrame, null will be returned.

Return
type	description
Object	WFrame object or null

Sample

// (Example) // The main page has wframe1 which contains wframe1 which also contains wframe11. // The source page of wframe11 has textbox1. textbox1.getScope(); // (Return Example) wframe11 object

getScopeWindow( )

For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
If not a child of a scope="true" WFrame, a global window object will be returned.

Return
type	description
Object	Scope object of the WFrame or a global window object

Sample

// (Example) // The main page has wframe1 which contains wframe1 which also contains wframe11. // The source page of wframe11 has textbox1. var scope = textbox1.getScopeWindow(); scope.wframe11 === textbox1.getScope(); // true

getSize( sizeName )

Sets the size (width and height) of the WebSquare component. (Supported in all WebSquare components.)
If set in %, values will be converted into pixels.

Parameter
name	type	required	description
sizeName	String	Y	Size types. For calculation of each size type, see the below:

Return
type	description
Number	Size of the component

Sample

var returnValue = componentId.getSize("width"); // (Return Example) 100 // Values are in pixels. // If set in %, values will be converted into pixels.

getStyle( propertyName )

Returns the CSS setting of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
propertyName	String	Y	CSS property to return

Return
type	description
String	CSS value

Sample

// Define an Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;"></xf:input> // (Example) Check the width of the InputBox above. var returnValue = input1.getStyle("width"); // (Return) "144px"

getStyleValue( style )

[deprecated]
Use getStyle instead.
Returns the current CSS applied to the WebSquare component.

Parameter
name	type	required	description
style	String	Y	CSS property to return

Return
type	description
String	CSS value (Colors are returned in HexCode.)

getTitle( )

Gets the current value of the title property.

Return
type	description
String	Title value

Sample

var title = inputCalendar1.getTitle();

getUdcHome( )

Returns the path of the UDC file including the file name in which the UDC object is defined. (Supported in all WebSquare components.)
The file name includes .xml. In order to get the file path without .xml, use getUdcRoot.
When called by a WebSquare component, not a UDC object, “undefined” will be returned.

Return
type	description
String	UDC file path (For others than the UDC, undefined will be returned.)

Sample

// Example // UDC file path is /a/b/udc.xml. // Page XML is /a/c/main.xml. // UDC ID is udc1. udc1.getUdcHome(); // (Result) /a/b/udc.xml

getUdcRoot( )

Returns the path of the UDC file in which the UDC object is defined. (Supported in all WebSquare components.)
Not contains the file name. In order to get a path including the file name, use getUdcHome.
When called by a WebSquare component, not a UDC object, “undefined” will be returned.

Return
type	description
String	UDC file path (For others than the UDC, undefined will be returned.)

Sample

// Example // UDC file path is /a/b/udc.xml. // Page XML is /a/c/main.xml. // UDC ID is udc1. udc1.getUdcHome(); // (Execution Result) /a/b/

getUserData( key )

Returns the value set by setUserData or directly defined by the user in the XML file. (Supported in all WebSquare components.)

Parameter
name	type	required	description
key	String	Y	Data key

Return
type	description
String	Value for the given key

Sample

// (Example) Setting the user property (setTest) in the InputBox <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" setTest="Hello"></xf:input> // Returns the value of the setTest property. input1.getUserData("setTest"); // (Return) "Hello" // Set 'valueTest' (key) and 'WebSquare' (data) through setUserData. input1.setUserData("valueTest","WebSquare"); // Returns the value of the setTest property. input1.getUserData("WebSquare"); // (Return) "WebSquare"

getValue( )

Gets the value of the selected date without using delimiters. (Example) 2007/11/08 -> 20071108

Return
type	description
String	String without delimiters

Sample

// Current selection: 2011-Jan-01 // In case the calendarValueType is yearMonthDate or not specified, the return will be in yyyyMMdd format. var returnValue = calendar1.getValue(); // (Return Example) "20110101" // In case the calendarValueType is yearMonth, the return will be in yyyyMM format. // (Return Example) "201101" In case the calendarValueType is yearMonthDateHour, the return will be in yyyyMMddHH format. // (Return) "2011010100" In case the calendarValueType is yearMonthDateTime, the return will be in yyyyMMddHHmm format. // (Return Example) "201101010000" In case the calendarValueType is yearMonthDateTimeSec, the return will be in yyyyMMddHHmmss format. // (Return Example) "20110101000000"

hasClass( className )

Checks whether the WebSquare component has a certain class. (Supported in all WebSQuare components.)

Parameter
name	type	required	description
className	String	Y	Name of the class to check

Return
type	description
Boolean	Whether the class exists or not

Sample

hide( )

Hides the WebSquare component. (Supported in all WebSquare components.)
display:none; or visibility:hidden; CSS is applied.

Sample

// (Example) Hide the component. componentId.hide();

removeClass( className )

Removes a class from the WebSquare component. (Supported in all WebSquare components.)
Only the classes added by addClass can be removed.
In order to remove classes directly defined as a property of the component, add the following in config.xml. // Add the following in config.xml. <style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	Name of the class to remove

Sample

// If the class is directly defined as an InputBox property. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // In the config.xml file, add the following. <style> <removeDefaultClass value="true" /> </style> // Classes can be removed by removeClass. input1.removeClass("tmpInputClass");

select( )

Selects the value based on the input.

Sample

inputCalendar1.select(); // (Display) Drag the date string to select.

setButtonTitle( )

Sets the buttonTitle property. The buttonTitle is the title property of the calendar image.

setCalendarValueType( calendarValueType , options )

Dynamically changes calendarValueType, displayFormat, and ioFormat.

Parameter
name	type	required	description
calendarValueType	String	Y	[yearMonth, yearMonthDate, yearMonthDateHour, yearMonthDateTime, yearMonthDateTimeSec] New calendarValueType.
options	JSON	N	New ioFormat and displayFormat. If not specified, the default of calendarValueType will be used.

Sample

// When the calendarValueType is changed only. inputCalendar1.setCalendarValueType("yearMonth"); // The calendarValueType will become, the ioFormat will be come yyyyMM, and the displayFormat will become yyyy-MM. // Add days to displayFormat. inputCalendar1.setCalendarValueType("yearMonthDate", {"displayFormat" : "yyyy-MM-dd(EEE)"}); // (Dsiplay) 2002-04-15(Mon)

setDefaultDate( dateStr )

Sets the defaultDate in compliance with the calendarValueType.

Parameter
name	type	required	description
dateStr	String	Y	Date to set

Sample

// In case of calendarValueType = "yearMonthDate", set the below. inputCalendar1.setDefaultDate("20020415"); // (Return) April-15-2002 will be displayed upon the end user’s clicking the calendar icon.

setDisabled( disabled )

Sets the disabled property.

Parameter
name	type	required	description
disabled	Boolean	Y	Disabled status

Sample

// Disable the component. componentId.setDisabled(true);

setDisplayFormat( format )

Sets the received argument as the displayFormat.

Parameter
name	type	required	description
format	String	Y	displayFormat to set

Sample

// Input is "2002-04-15". inputCalendar1.setDisplayFormat("yyyy.MM.dd"); // (Display) 2002.04.15

setEventPause( evList , flag )

Pauses the event. (Supported in all WebSquare components.)

Parameter
name	type	required	description
evList	String	N	List of the events to pause. (in case of null, all events of the corresponding WebSquare component is paused or restarted.)
flag	Boolean	Y	Whether to pause the event or not.

Sample

// (Example 1) // Pause the onclick event. input1.setEventPause("onclick", true); // (Example 2) // Restart the onfocus and the onblur events. input1.setEventPause("onfocus,onblur", false); // (Example 3) // Pause all events registered in input1. input1.setEventPause(null, true);

setHoliday( dateStr )

Sets a holiday to a certain date.

Parameter
name	type	required	description
dateStr	String	Y	Date of the holiday

Sample

inputCalendar1.setHoliday("20160627"); Or, do the following to apply to all years. inputCalendar1.setHoliday("*0815"); // (Display Example) The date of 2016-Jun-27 will be displayed in red.

setHolidayRef( setHolidayRef )

Sets the holidayRef property. To bind with the DataCollection, add "data:" prefix.
If not specified, XPath of the InstanceData will be used.

Parameter
name	type	required	description
setHolidayRef	String	Y	Path of the setHolidayRef to apply.

Sample

// Display col1 of dataList1 and the holidays of inputCalendar. inputCalendar.setHolidayRef("data:dataList1.col1"); // Bind with test/holiday of the InstanceData. inputCalendar.setHolidayRef("test/holiday");

setInitStyle( property )

Restores the initial style of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
property	String	N	CSS property (If not spcified, all properties will be restored.)

Sample

// (Example) group1.setInitStyle();

setInputReadOnly( readOnly )

Enables readOnly in the input box.

Parameter
name	type	required	description
readOnly	Boolean	Y	True to enable, or false to disable

Return
type	description

Sample

Example: inputCalendar1.setInputReadOnly(true); will enable readOnly only in the input box. False will disable the readOnly property.

setIoFormat( ioFormat , displayFormat )

Sets ioFormat and displayFormat properties of the InputCalendar component. Replaces the existing setFormat API.

Parameter
name	type	required	description
ioFormat	String	Y	ioFormat to set
displayFormat	String	N	displayFormat to set

Sample

// The input is in order of day, month, and year. inputCalendar1.setIoFormat("ddMMyyyy", "dd-MM yyyy"); // In order to display 2002-Apr-15, the user must input 15042002. // (Display) 15-04 2002

setMaxYear( maxYear )

Dynamically sets the maxYear of the calendar.

Parameter
name	type	required	description
maxYear	String	Y	maxYear

Sample

inputCalendar1.setMaxYear(2050);

setMinYear( minYear )

Dynamically sets the minYear of the calendar.

Parameter
name	type	required	description
minYear	Number	Y	minYear

Sample

inputCalendar1.setMinYear(2000);

setNextTabID( componentID , componentScope )

Sets the nextTabID property.
When the ID of the frame in which the nextTabID, the second argument, is given, the scope can be set. (Related Property) nextTabID

Parameter
name	type	required	description
componentID	String	Y	Component ID to set as the nextTabID
componentScope	String	N	Component scope to set as the nextTabID

Sample

// Example inputCalendar1.setNextTabID("input2", "wframe1");

setOpacity( value )

Sets the opacity in the WebSquare component. (Supported in all WebSquare components.)
The engine sets the opacity property (of CSS).

Parameter
name	type	required	description
value	Number	Y	Opacity (Real number between 0 and 1)

Sample

// (Example) Set the opacity as 0.45. componentId.setOpacity(0.45);

setPlaceholder( placeholderStr )

Changes the placeholder property.

Parameter
name	type	required	description
placeholderStr	String	Y	New placeholder value

Sample

inputCalendar1.setPlaceholder("Select a date.");

setPosition( left , top , mode )

Sets the position (left, top) of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
left	Number	Y	Left position value or null
top	Number	Y	Top position value or null
mode	String	N	Position setting method. [default: absolute, delta]

Sample

// (Example) Set the top position as 100px. componentId.setPosition(null, 100);

setReadOnly( readOnly )

Controls the "readOnly" property. True to enable, or false to disable.

Parameter
name	type	required	description
readOnly	Boolean	Y	True to enable, or false to disable.

Sample

// Enable the read-only. componentId.setReadOnly(true);

setRef( ref )

Sets the ref property. Add “data:” prefix to bind with a DataCollection.
If not specified, XPath of the InstanceData will be used.

Parameter
name	type	required	description
ref	String	Y	ref path to apply

Sample

// Bind birthday key of dataMap1 with the input1 component. input1.setRef("data:dataMap1.birthday"); // Bind with res/userData/birthday of the InstanceData. input1.setRef("res/userData/birthday");

setSkin( skin )

Selects the skin to use.

Parameter
name	type	required	description
skin	String	Y	[class1, class2, class3, class4, class5] Name of the skin to use.

Sample

inputCalendar1.setSkin("class2");

setStyle( propertyName , value )

Sets the CSS of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
propertyName	String	Y	CSS property to set.
value	String	Y	Value to set as the specified CSS property

Sample

// (Example 1) Set the width as 200px. componentId.setStyle("width", "200px"); // (Example 2) Set the background as olive. componentId.setStyle("background-color","olive");

setUserData( key , value )

Sets random data in the WebSquare component. (Supported in all WebSquare components.)
Enter key values supported by the component. In case a key value not supported by the component is entered, corresponding logs will be displayed.

Parameter
name	type	required	description
key	String	Y	Data key to set
value	String	Y	Defined data value

Sample

// Set 'data' key and 'WebSquare' value in the component. componentId.setUserData("data", "WebSquare"); // The key must be supported in the component. componentId.setUserData("title", "WebSquare"); // Following logs will be displayed. // !!!WARNING - [title] can't be defined as UserData.

setValue( value )

Sets the component value. The calendar will be also selected by the value.

Parameter
name	type	required	description
value	String	Y	value

Sample

// No properties (such as displayFormat or delimiter) is specified. inputCalendar1.setValue("20020415"); // 002-Apr-15 will be set for the calendar, and 2002-04-15 will be displayed in the input box.

setValueCancel( value )

Ignores the date being currently entered and displays the previously entered during a date being entered in the InputCalendar.
Valid only for dateValidSetCustom="true".
A popup is opened instead of an alert created by the invalidMessageFunc and the onpageunload event of the popup calls this function. When the popup is closed, the previous date will be returned.

Parameter
name	type	required	description
value	String	Y	value

show( displayType )

Shows the WebSquare component on the page. (Supported in all WebSquare components.)
Sets the display property as specified and applies "visibility: show;" CSS.

Parameter
name	type	required	description
displayType	String	N	CSS display setting to apply.

Sample

// (Example) display: block; componentId.show(); // (Example) Restore the previous display setting. componentId.show("");

toggleClass( className )

Adds or removes a CSS class to or from a WebSquare component. (Supported in all WebSquare components.)
Removes the class from the WebSquare component.
If the WebSquare component does not have the specified class, adds the class.
Only the classes added by addClass can be removed.
In order to remove classes directly defined as a property of the component, add the following in config.xml. // Add the following in config.xml. <style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	Class to add or remove

Sample

// The class is directly defined in the inputBox component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following in config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.toggleClass("tmpInputClass"); // Add the (previously removed) tmpInputClass. input1.toggleClass("tmpInputClass");

trigger( type , array )

Triggers a certain event in the component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
type	String	Y	Event to trigger
array	Array	N	Array of parameters to send to the event handler

Sample

// (Example 1) // Trigger the onclick event in input1 component. input1.trigger("onclick"); // (Example 2) // Trigger the onviewchange event in input1, and send (1, 2) parameter to the handler function. input1.trigger("onviewchange", [1,2]);

unbind( type , function )

Removes the event from the component. (Supported in all WebSquare component.)

Parameter
name	type	required	description
type	String	N	Event to remove. (If not specified, all events of the component will be removed.)
function	Function	N	Handler function of the event to remove. (If not specified, all handler functions of the event will be removed.)

Sample

// (Example 1) // Remove all events registered in the input1 component. input1.unbind(); // (Example 2) // Remove all handler functions for the onviewchange event of the input1 component. input1.unbind("onviewchange"); // (Example 3) // Remove func1 for the onviewchange event of the input1 component. input1.unbind("onviewchange", func1);

unbindRef( )

Releases the ref binding.

validate( )

Validates the component according to the specified properties. (Related Property) displaymessage="true" (Validation Properties) mandatory dateValidCheck

Return
type	description
Boolean	Returns true for valid result, or false.

Sample

// mandatory = "true" var returnValue = inputCalendar1.validate(); (Return - When there is no input.) "false" will be returned. (Return - When there is input.) "true" will be returned. // Set displaymessage as true to alert a message defined in the WebSquare5 Engine upon a validation failure. // (Message Example) This field is mandatory.

validateObject( )

Validates the component according to the specified properties. (Related Property) displaymessage="true" (Validation-related Properties) mandatory

Return
type	description
Object	object validation result object

Sample

// Set mandatory as shown below. <w2:inputCalendar renderType="component" id="inputCalendar1" style="position: absolute;width:212px;height:61px;left:786px;top:272px;" mandatory="true"></w2:inputCalendar> var returnObj = inputCalendar1.validateObject(); // (Return - If there is no InputCalendar value) The returnObj will be returned. returnObj.callerId = "inputCalendar1" returnObj.type = "mandatory" returnObj.value = "" // (Return - When there is an InputCalendar value) An empty object will be returned. // In case of displaymessage="true", a default message will be alerted. // (Message Example) This field is mandatory.

visible( flag )

[deprecated]
Use show/hide or setStyle instead.
The Engine sets the CSS visibility property.

Parameter
name	type	required	description
flag	Boolean	Y	CSS visibility setting