WebSquare.uiplugin.inputCalendar

Provides an interface consisting an input field and a calendar icon. The end user can directly enter a date or select a date from the calendar.
Properties such as validCheck, minYear, and maxYear provide date validation and year ranging features.
At the highest level is the div tag, and at the lower levels are various tags used.

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 standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).
dateValidCheck: Checks whether the input is valid as a date. Checks length, date format, etc.
dateValidSet: [default: false, true] Validates the inputted date. If not valid, goes back to the previous value.
defaultDate: Default date when there is no input.
delimiter: [default: -] String to separate year, month, and day.
disableDateValidSet: [default: false, true] In case disableBeforeDate or disableAfterDate property is enabled, disabled dates cannot be entered.
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: [default:false, true] Displays the result message upon a validation failure by the validation API.
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: [default:false, true] readOnly status of the input box.
invalidMessageFunc: Name of the function that dynamically displays messages upon a validation failure by the validation 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: [default:false, true] Mandatory field. The validation function checks mandatory input fields. (Options) "false" (Default) Not make it mandatory. "true" Make it mandatory. </xmp></xmp>
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.
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.
placeholder: Hint for the end users. Functions same as the placeholder of HTML5.
readOnly: [default:false, true] Current value of the readOnly property. Same as readonly in HTML.
ref: The value of the DataCollection. Required to bind the component with a DataCollection. Starts with a prefix of "data:".
renderDiv: [default:false, true] Calendar document rendering type (table or div). False for table, true for 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").
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: Tooltip provided by WebSquare5. Displays additional information of the component.
topLayout: [default: false, true] Moves Today and Close buttons to the top-right corner.
type: [default:text] Same as the HTML type property.
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
validateRef: Executes the validation on the ref binding.
validator: Runs the specified function upon blurring of the component.
validCheck: [default:false, true] Validates the inputted string, and may display an alert, if not valid.
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.
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( ): Opens the focus of the input box, and affected by the focusing method of the browser.
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.
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, height) of the WebSquare component.
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. Related with the ioFormat length that depends on the calendarValueType.
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( title ): 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.
setValue( value ): Sets the value of the component.
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( ): Returns the validation result according to the related validation settings.
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.
However, in case the last-inputted character is a Korean character, the focus will not be automatically moved. (This is because even an unfinished Korean character reaches the maxByteLength.)
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 standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).
Different classes are applied to each of the components. The specified class can function as the common class.
InputCalendar has complicated structure so that it is recommended to control the classes of lower-node tags.
dateValidCheck: Checks whether the input is valid as a date. Checks length, date format, etc.
dateValidSet: [default: false, true] Validates the inputted date. If not valid, goes back to the previous value.
Define the validation function and set as the validator property.
true: Validate. false: Default Does not return to the previous value although proven not valid.
defaultDate: Default date when there is no input. When not specified, the current date will be displayed.
delimiter: [default: -] String to separate year, month, and day.
disableDateValidSet: [default: false, true] In case disableBeforeDate or disableAfterDate property is enabled, disabled dates cannot be entered.
Upon blurring after date input, displays the verified value previously inputted.
true: If a disabled date is entered, the previously entered (valid) date will be displayed.
false: Default A disabled date can be entered.
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: [default:false, true] Displays the result message upon a validation failure by the validation API.
Displays the result message upon a validation failure by the validation API. Define a customized message using the invalidMessageFunc property.
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: [default:false, true] readOnly status of the input box.
invalidMessageFunc: Name of the function that dynamically displays messages upon a validation failure by the validation API.
The displaymessage property must be true. Cannot be used with invalidMessage at the same time.
The customized function (in the following example) gets the type of the value through this.getType() and the value through this.getValue(), and returns the dynamically created message through the use of the type and the value.
type) mandatory, allowChar, ignoreChar, minLength, maxLength, minByteLength, maxByteLength]
(Example) function fn_msg(){ var tmpType = this.getType(); var tmpValue = this.getValue(); if(tmpType == "mandatory"){ return "Required."; } }
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: [default:false, true] Mandatory field. The validation function checks mandatory input 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
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.
placeholder: Hint for the end users. Functions same as the placeholder of HTML5.
The operation method depends on the browser. (For examples, in case of IE, the hint will disappear upon being focused. However, on Chrome, the hint disappears upon Text input.)
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: The value of the DataCollection. Required to bind the component with a DataCollection. Starts with a prefix of "data:".
(Format: data: [DataCollection ID].[Key id or Column id]) (Example) data:dataMap1.birthday
When bound with a DataList, the row selected on the GridView will be bound.
Specify the XPath of the XML data to interface with the instance data. (Example) res/userInfo/birthday/@value
renderDiv: [default:false, true] 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
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: Tooltip provided by WebSquare5. Displays additional information of the component. Displayed upon mouse-over.
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: [default:text] Same as the HTML type property.
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.
validateRef: Executes the validation on the ref binding. Related properties include validCheck, dateValidSet, and displaymessag.
validator: Runs the specified function upon blurring of the component.
Executed before the occurrence of the onlubur event, and the value can be changed thorugh the return.
validCheck: [default:false, true] Validates the inputted string, and may display an alert, if not valid.
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.
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.

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> // The class can be changed. (Change the class from tmpInputClass 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

inputCalendar.disableAfterDate("20170410"); // (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

inputCalendar.disableBeforeDate("20170410"); // (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 enabeld on the calendar.

focus( )

Opens the focus of the input box, and affected by the focusing method of the 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 : To be displayed on the calendar unless user input is made.)

Return
type	description
String	Current defaultDate

Sample

Example: defaultDate = "20101225" var returnValue = inputCalendar1.getDefaultDate(); 20101225 will be returned. If the defaultDate is not specified, 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) 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, height) of the WebSquare component. (Supported in all WebSquare components.) If set in %, the value will be converted into pixels.

Parameter
name	type	required	description
sizeName	String	Y	[height, innerHeight, outerHeight, outerMarginHeight, width, innerWidth, outerWidth, outerMarginWidth] Position type. For the details, see 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"); // (Reurn) "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. Related with the ioFormat length that depends on the calendarValueType.
Set a proper date string.

Parameter
name	type	required	description
dateStr	String	Y	Date to set

Sample

inputCalendar1.setDefaultDate("20020415"); // calendarValueType = "yearMonthDate" // (Display) If no data is given, the initial selection (2002-04-15) will be used.

setDisabled( disabled )

Sets the disabled property. True to disable, or false not to disable.

Parameter
name	type	required	description
disabled	Boolean	Y	True to disable, or false not to disable.

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. (true: Pause. false: Restart.)

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.setFormat("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	[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( title )

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
title	String	Y	Path of ref

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.

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	[default: block, inline, none, ""] CSS display setting.

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

Returns the validation result according to the related validation settings.
When the dateValidCheck is true, the validity of the date (length, year, month, date, and the leap year) will be checked.

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

Sample

(Example) mandatory = "true" var returnValue = inputCalendar1.validate(); "false" will be returned if there is no input, or "true" will be returned.

validateObject( )

Validates the component according to the specified properties.
Related Properties : mandatory, minLength, maxLength, minByteLength, maxByteLength

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 Example - If there is no InputCalendar value, returnObj will be returned. returnObj.callerId = "inputCalendar1" returnObj.type = "mandatory" returnObj.value = "" // Return Example - When there is an InputCalendar value, an empty object will be returned. If displaymessage is"true", a validation failure will alert the defined message. // (Alert 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