WebSquare.uiplugin.datePicker

DatePicker. Calendar component dedicated to mobile. Dedicated to mobile uses. To be used instead of Calendar or InputCalendar component. Time selection type depends on the setting of the calendarValueType property. At the highest level 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. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
dateSuffix: [default: day] Text to be set after the date number. For a black, use $blank.
id: Component ID
monthNames: Month names. Separate months using comma (",").
ref: Value path of the DataCollection. Used with a purpose to bind a DataCollection with a WebSquare component.
tabIndex: The focusing order by the Tab key.
title: Same as the class property in HTML.
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. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
dateSuffix: [default: day] Text to be set after the date number. For a black, use $blank.
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: Value path of the DataCollection. Used with a purpose to bind a DataCollection with a WebSquare component.
(Format: data: [DataCollection ID].[Key id or Column id])
When bound with a DataList, the value of the selected row in the GridView will be bound.

Specify the XPath of the XML data to interface with the instance data.
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.
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.
In case the change was made by a script, the event will not be triggered. (Similar to the native onchange event.)

Parameter
name	type	description
info	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.