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: Component 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: The focusing order by the Tab key.
title: Same as the class property in HTML.
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 the value on the list is changed through keyboard input or mouse clicking.

Method Summary

getDataListInfo( ): Returns the dataList bound with the component.
getValue( ): Returns the currently selected date.
setRef( title ): Sets the ref property. 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: Component ID
The component ID is allocated as a global object. The script can access each object through the component 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: 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.
useLocale: Supports multi-language.
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.
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 the value on the list is changed through keyboard input or mouse clicking.

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

Sample

Method Detail

getDataListInfo( )

Returns the dataList bound with the component.

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

Sample

// Example datePicker1.getDataListInfo();

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