WebSquare.uiplugin.datePicker

Designed for mobile environments. To be used instead of Calendar or InputCalendar component.
Time selection type depends on the setting of the calendarValueType property.
At the highest level of the component is the HTML div tag.

Type

uiplugin

Property Summary

ampm: String to indicate AM and PM when the calendarValueType property is yearMonthDateTime.
calendarValueType: [default:yearMonthDate, yearMonth, yearMonthDateTime, hourMinute] Calendar design
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).
dateSuffix: [default: date] String to follow the date.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
monthNames: Month names. Separate months using comma (",").
ref: The value of the DataCollection. Required to bind the component with a DataCollection. Starts with a prefix of "data:".
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.
useLocale: Supports multi-language.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
yearSuffix: [default: year] String to follow the year. Enter $blank for blank space.

Event Summary

onchange: Triggered upon changes in datePicker values.
onviewchange: Triggered when a value on the list is changed through the keyboard or mouse.

Method Summary

getDataListInfo( ): Returns the list of the datalists bound with the component.
getValue( ): Returns the currently selected date.
setRef( ref ): Dynamically sets the ref binding. Add data: prefix to bind with a DataCollection.
setValue( value ): Select an item that contains the same value as the value received as an argument.
unbindRef( ): Releases the ref binding.

Property Detail

ampm: String to indicate AM and PM when the calendarValueType property is yearMonthDateTime.
ex)AM,PM
calendarValueType: [default:yearMonthDate, yearMonth, yearMonthDateTime, hourMinute] Calendar design
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).
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
dateSuffix: [default: date] String to follow the date.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
monthNames: Month names. Separate months using comma (",").
ex) Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
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
Specify the XPath of the XML data to interface with the instance data. (Example) res/userInfo/birthday
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.
useLocale: Supports multi-language.
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.
yearSuffix: [default: year] String to follow the year. Enter $blank for blank space.

Event Detail

onchange

Triggered upon changes in datePicker values.

onviewchange

Triggered when a value on the list is changed through the keyboard or mouse.
No event will be triggered for the changes caused by scripts. (Similar to the native onchange event.)

Parameter
name	type	description
info	Object	Returns an object containing oldValue, newValue, oldSelectedIndex, and newSelectedIndex.

Sample

Method Detail

getDataListInfo( )

Returns the list of the datalists bound with the component.

Return
type	description
Object:Y	dataList Info

getValue( )

Returns the currently selected date.

Return
type	description
String	Value of the selected item

Sample

// When the calendarValueType property is not set, yearMonthDate format will be used. var tmpRs = datePicker1.getValue(); // Eight-digit string in yyyyMMdd format // (Return Example) "20020415" // When the calendarValueType is yearMonthDateTime var tmpRs = datePicker1.getValue(); //12-digit string in yyyyMMddHHmm format // (Return Example) "200204151758"

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	XPath of the new ref

Sample

// Bind the regDate key of dataMap1 with the value of the input1 component. datePicker1.setRef("data:dataMap1.regDate"); // When bound with res/userData/regDate of the InstanceData. datePicker1.setRef("res/userData/regDate");

setValue( value )

Select an item that contains the same value as the value received as an argument.
The format specified by the calendarValueType property must be applied to the value.

Parameter
name	type	required	description
value	String	Y	Value of the item

Sample

// The calendarValueType property is "yearMonthDateTime". datePicker1.setValue("201201012001"); // (Display Example) 2012-Jan-01 8:01 PM will be selected.

unbindRef( )

Releases the ref binding.