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] Automatically focuses if the nextTabID is defined and the maxByteLength matches.
buttonTitle: Adds the title to the calendar image.
calendarClass: [default:class1, class2, class3, class4, class5] Skin type of the calendar.
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)
displaymessage: [default:false, true] Displays the result message upon a validation failure by the validation API.
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: ID of the component. Allocated as a global object. Scripts access the component through the 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.
mandatory: [default:false, true] Whether to check the mandatory input or not when calling the validation API.
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: Component ID to move by tab
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: Same as the tabindex property in HTML standard. Indicates the focusing order of the component by the tab key.
title: Same as the title property of HTML. Displays the Text upon the end user's hovering the mouse over the browser.
toolTip: Tooltip provided by WebSquare5. Displays additional information of the component.
topLayout: [default: false, true] Moves Today and Close buttons to the top right.
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
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] se wmode. To be used when the component is hidden by an object (such as activeX or flash).
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 upon the end user's changing the date through keyboard input or mouse clicking.
onyearselect: Triggered upon change of the year.

Method Summary

addClass( className ): Adds a class to the component.
bind( eventType , function ): Dynamically allocates events to the component.
blur( ): Blurs the input.
changeClass( oldClassName , newClassName ): Renames the class from oldClassName to newClassName.
disableAfterDate( dateStr )
disableBeforeDate( dateStr )
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.
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 DataLists bound with the Image.
getDefaultDate( ): Returns the current value of the defaultDate property.
getDisabled( ): Gets 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( ): Called by a component under the Generator component. When called, gets the parent Generator object.
getID( ): Gets the ID of the component.
getInitStyle( property ): Gets the initial style of the component.
getIoFormat( ): Returns the current value of the ioFormat property.
getNextTabID( ): Returns the nextTabID value.
getOpacity( ): Gets the opacity of the component defined in CSS.
getPluginName( ): Gets the pluginName (or the name) of the component.
getPosition( positionName ): Gets the left or top position of the component.
getReadOnly( ): Gets the current setting of the readOnly property.
getScope( ): Returns the parent WFrame object when the component is a child of the WFrame which uses the scope feature (scope=true).
getScopeWindow( ): Returns the scope object of the parent when the component is a child of the WFrame which uses the scope feature (scope=true).
getSize( sizeName ): Gets the size of the component.
getStyle( propertyName ): Gets the current value of the propertyName of the component defined in CSS.
getStyleValue( style ): [deprecated] Use getStyle instead.
getTitle( ): Gets the current value of the title property.
getUdcHome( ): Returns the path of the file which defines the UDC.
getUdcRoot( ): Returns the path of the file which defines the UDC.
getUserData( key ): Returns the user-defined property value set by setUserData as the user data or source (page XML).
getValue( ): Gets the value of the selected date without using delimiters.
hasClass( className ): Checks whether the component has className received as a parameter or not.
hide( ): Hides the component.
removeClass( className ): Removes className from the component.
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 ): Disables or enables the component event.
setFormat( ioFormat , displayFormat ): Sets the received arguments as ioFormat and displayFormat respectively.
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 ): Initializes the component style.
setInputReadOnly( readOnly ): Enables readOnly in the input box.
setMaxYear( maxYear ): Dynamically sets the maxYear of the calendar.
setMinYear( minYear ): Dynamically sets the minYear of the calendar.
setNextTabID( componentID , componentScope ): Sets the nextTabID.
setOpacity( value ): Sets the opacity of the component.
setPlaceholder( placeholderStr ): Changes the placeholder property.
setPosition( left , top , mode ): Sets the position (left, top) of the component.
setReadOnly( readOnly ): Controls the "readOnly" property.
setRef( ref ): Dynamically sets the ref binding. Add data: prefix to bind with a DataCollection.
setSkin( skin ): Selects the skin to use.
setStyle( propertyName , value ): Sets the style of the specified property.
setUserData( key , value ): Sets the user data in the component.
setValue( value ): Sets the value of the component.
show( displayType ): Displays the component.
toggleClass( className ): Removes a class named className, or if there is no such a class, adds a class named className.
trigger( type , array ): Triggers a certain event registered for the component.
unbind( type , function ): Removes an event registered for the 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] Shows/Hides the component, or sets the visible property using setStyle.

Property Detail

alt: String for the alt property in HTML. Mandatory for web accessibility.
autoFocus: [default:false, true] Automatically focuses if the nextTabID is defined and the maxByteLength matches.
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.
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.
When the entered date gets blurred, the previously entered date will be displayed.
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
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.
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: ID of the component. Allocated as a global object. Scripts access the component through the 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.
mandatory: [default:false, true] Whether to check the mandatory input or not when calling the validation API.
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: Component ID to move by tab
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: Same as the tabindex property in HTML standard. Indicates the focusing order of the component by the tab key.
title: Same as the title property of HTML. Displays the Text upon the end user's hovering the mouse over the browser. Generally used to support web accessibility. 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.)
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("userData1") 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.
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.
(ex) See https://inswave.com/jira/browse/SKT-691.
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.
(ex) See https://inswave.com/jira/browse/SKT-691.
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.
(ex) See https://inswave.com/jira/browse/SKT-691.
weekStartsOn: [default: 0, 1, 2, 3, 4, 5, 6] Starting day of the week (0: Sunday, ..., 6: Saturday)
wmode: [default:false, true] se wmode. To be used when the component is hidden by an object (such as activeX or flash).
sing the wmode (true) is to put the component above the object tag, not to set the wmode. It is recommended to use the wmode in the object tag (such as activeX or flash).
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 upon the end user's changing the date through keyboard input or mouse clicking.
In case the change was made by a script, no event will 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 class to the component.

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

Sample

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

bind( eventType , function )

Dynamically allocates events to the component.

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

Sample

// Define the event handler function for the onclick event in the input component, and bind the function. input1.bind("onclick", function(e){ alert(input1.getValue();})); // Bind commObj.ev_click function for the onclick event with component input1. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; input1.bind("onclick", commObj.ev_click );

blur( )

Blurs the input.

Sample

inputCalendar1.blur();

changeClass( oldClassName , newClassName )

Renames the class from oldClassName to newClassName.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
oldClassName	String	Y	Name of the class to remove
newClassName	String	Y	Name of the class to add

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Change tmpInputClass class to tmpInputWarninClass. input1.changeClass("tmpInputClass","tmpInputWarninClass");

disableAfterDate( dateStr )

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 )

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.

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.

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 DataLists bound with the Chart.

Return
type	description
Object:Y	dataList Info

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

Gets the current value of the disabled property.

Return
type	description
Boolean	The value of the disabled property.

Sample

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

Called by a component under the Generator component. When called, gets the parent Generator object.

Return
type	description
Object	Parent Generator object

Sample

<w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator> scwin.trigger1.onclick = function(){ console.log(this.getGenerator());} // Click trigger1 to display the generator1 object on the console. // See https://inswave.com/jira/browse/WPF-1425.

getID( )

Gets the ID of the component.

Return
type	description
String	ID of the WebSquare5 component

Sample

// The WebSquare5 component dynamically received as a parameter can be used as shown in the following. function fn_validCheck(tmpObj){ // tmpObj has an ID of "input1". var compID = tmpObj.getID(); // (Return Example) "input1" }

getInitStyle( property )

Gets the initial style of the component.

Parameter
name	type	required	description
property	String	N	Name of the attribute (If not specified, all information will be ouputted.)

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.

Sample

var nextTabID = inputCalendar1.getNextTabID();

getOpacity( )

Gets the opacity of the component defined in CSS.

Return
type	description
Integer	Opacity

Sample

// Apply opacity CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> var returnValue = input1.getOpacity(); // "returnValue" is a real number between 0 and 1. // (Return Value) "0.2"

getPluginName( )

Gets the pluginName (or the name) of the component.

Return
type	description
String	pluginName of the WebSquare5 component

Sample

// For a WebSquare5 object dynamically received by a common function, conditional statements can be used as shown below. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); // Component ID var tmpCompType = tmpObj.getPluginName(); // Component Type if(tmpCompType == "input"){ //..Logic.. }else if(tmpCompType == "gridView"){ //..Logic .. }else{ //..Logic.. } };

getPosition( positionName )

Gets the left or top position of the component. If set by %, the corresponding pixel value will be returned.

Parameter
name	type	required	description
positionName	String	Y	[left,top] Type of the position

Return
type	description
Number	Position of the component

Sample

// Apply margin CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> var returnValue = input1.getPosition("top"); // The returnValue will be a position in pixels. // (Return Example) 10

getReadOnly( )

Gets the current setting of the readOnly property.

Return
type	description
Boolean	The current setting of the readOnly property

Sample

var returnValue = componentId.getReadOnly(); // (Return Example) false

getScope( )

Returns the parent WFrame object when the component is a child of the WFrame which uses the scope feature (scope=true).
Returns null when the component is not a child of the WFrame using the scope feature (scope=true).

Return
type	description
Object	wframe object or null

Sample

// The main page contains wframe1, and wframe1 contains wframe11 which contains textbox1. textbox1.getScope(); // Returns wframe11 object.

getScopeWindow( )

Returns the scope object of the parent when the component is a child of the WFrame which uses the scope feature (scope=true).
Returns a global window object when the component is not a child of the WFrame using the scope feature (scope=true.

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

Sample

// The main page contains wframe1, and wframe1 contains wframe11 which contains textbox1. var scope = textbox1.getScopeWindow(); scope.wframe11 === textbox1.getScope(); // true

getSize( sizeName )

Gets the size of the component. If set by "%", the corresponding pixel value will be returned.

Parameter
name	type	required	description
sizeName	String	Y	[height, innerHeight, outerHeight, outerMarginHeight, width, innerWidth, outerWidth, outerMarginWidth] Type of the size. For the calculation of each size type, see below.

Return
type	description
Number	Size of the component

Sample

var returnValue = componentId.getSize("width"); // "returnValue" will be a size in pixels. If set by "%", the corresponding pixel value will be returned. // (Return Example) 100

getStyle( propertyName )

Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
propertyName	String	Y	Name of the property in the style

Return
type	description
String	Style value

Sample

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

getStyleValue( style )

[deprecated] Use getStyle instead.
Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
style	String	Y	Name of the property defined in the style

Return
type	description
String	Value defined in the style property. (In case of a color, the hexcode of the color will be returned.)

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 file which defines the UDC. Includes the file extension of .xml. For a path without .xml, use getUdcRoot. When called by a component, not a UDC object, undefined will be returned.

Return
type	description
String	When called by a component, not a UDC object, undefined will be returned.

Sample

The udc file is /a/b/udc.xml, the XML file is /a/c/main.xml, and the UDC object ID is udc1. udc1.getUdcHome(); // The execution result is /a/b/udc.xml.

getUdcRoot( )

Returns the path of the file which defines the UDC. udc1.getUdcHome(); // The execution result is /a/b/udc.xml. For a path including .xml, use getUdcHome. When called by a component, not a UDC object, undefined will be returned.

Return
type	description
String	When called by a component, not a UDC object, undefined will be returned.

Sample

The udc file is /a/b/udc.xml, the XML file is /a/c/main.xml, and the UDC object ID is udc1. udc1.getUdcHome(); // The execution result is /a/b/udc.xml.

getUserData( key )

Returns the user-defined property value set by setUserData as the user data or source (page XML).

Parameter
name	type	required	description
key	String	Y	Random data key

Return
type	description
String	Data of the corresponding key

Sample

// Apply the customized property (eduTest) to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" eduTest="Hello"></xf:input> input1.getUserData("eduTest"); // (Return Example) "Hello" // Use setUserData. input1.setUserData("eduTest","WebSquare"); input1.getUserData("WebSquare"); // (Return Example) "Hello"

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 component has className received as a parameter or not.

Parameter
name	type	required	description
className	String	Y	className to check

Return
type	description
Boolean	Whether the component has the class or not

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> var returnValue = input1.hasClass("tmpInputClass"); // (Return Example) true

hide( )

Hides the component.
he CSS setting will be "display:none;" and "visibility:hidden;".

Sample

componentId.hide();

removeClass( className )

Removes className from the component.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

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

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. 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 )

Disables or enables the component event.

Parameter
name	type	required	description
evList	String	N	List of the events. If not specified, all user events of the component will be listed. (Enter null data.)
flag	Boolean	Y	true is to pause, or false is to cancel pausing.

Sample

input1.setEventPause("onclick", true); // Dynamically pauses the onclick event. input1.setEventPause("onfocus,onblur", false); // Restarts the onfocus and the onblur events. input1.setEventPause(null, true); // Pauses all user events registered for the Input component.

setFormat( ioFormat , displayFormat )

Sets the ioFormat and the displayFormat.

Parameter
name	type	required	description
ioFormat	String	Y	ioFormat to set
displayFormat	String	Y	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

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 )

Initializes the component style.

Parameter
name	type	required	description
property	String	N	Name of the property (If not specified, all properties will be returned.)

Sample

group1.getInitStyle();

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.

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. When the ID of the frame in which the nextTabID, the second argument, is given, the scope can be set.

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

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

setOpacity( value )

Sets the opacity of the component.

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

Sample

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 component.

Parameter
name	type	required	description
left	Number	Y	Left position or null.
top	Number	Y	Top position or null.
mode	String	N	[defulat:absolute, delta] absolute sets the current positions as x and y, and delta adds x and y to the current positions.

Sample

// Set the top position of the component as 100 pixels. 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 )

Dynamically sets the ref binding. 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	Path of the 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 style of the specified property.

Parameter
name	type	required	description
propertyName	String	Y	Name of the style
value	String	Y	Value of the style

Sample

// Set the component width as 200px. componentId.setStyle("width", "200px"); // Change the background color to olive. componentId.setStyle("background-color","olive");

setUserData( key , value )

Sets the user data in the component. If the key cannot be set for the component, corresponding logs will be displayed.

Parameter
name	type	required	description
key	String	Y	Random data key
value	String	Y	Random data key

Sample

// Setting a (key, value) pair of ("data", "WebSquare5") in the component. componentId.setUserData("data", "WebSquare"); // Some keys cannot be set for the component. componentId.setUserData("title", "WebSquare"); // (Log Example) !!!WARNING - [title] can't define 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 )

Displays the component.
The related CSS properties are display and visibility:show;.

Parameter
name	type	required	description
displayType	String	N	[default:block ,inline ,none ,""] Value of the Display property.

Sample

// Block the "display" property. componentId.show(); // Enable the "display" property in the class. componentId.show("");

toggleClass( className )

Removes a class named className, or if there is no such a class, adds a class named className.
In the default setting, only the classes added by addClass can be removed. To remove other classes, add the following setting in config.xml.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	className to set

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.toggleClass("tmpInputClass"); // Add tmpInputClass class again. input1.toggleClass("tmpInputClass");

trigger( type , array )

Triggers a certain event registered for the component.

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

Sample

// Trigger the onclick event in the input1 component. input1.trigger("onclick"); // Trigger the onviewchange event in the input component and call the event handler function by sending arguments of (1, 2). input1.trigger("onviewchange", [1,2]);

unbind( type , function )

Removes an event registered for the component.

Parameter
name	type	required	description
type	String	N	Name of the event to remove. If not specified, all events of the components 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

// Remove all events registered in the input component. input1.unbind(); // Remove all handler functions of onviewchange event registered in the input component. input1.unbind("onviewchange"); // Remove the func1 event handler of onviewchange event registered for component input1. 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 - with inputCalendar value) An empty object will be returned. // Return - without inputCalendar value) returnObj will be returned. returnObj.callerId = "inputCalendar1" returnObj.type = "mandatory" returnObj.value = "" If displaymessage is"true", a validation failure will alert the defined message. // (Alert Example) This field is mandatory.

visible( flag )

[deprecated] Shows/Hides the component, or sets the visible property using setStyle.
Sets the visibility of the component style. In case of true, set visible. In case of false, set hidden.

Parameter
name	type	required	description
flag	Boolean	Y	Visibility (In case of true, set visible. In case of false, set hidden.)