WebSquare.uiplugin.datePicker

모바일 전용 컴포넌트로 Calendar 컴포넌트와 InputCalendar 컴포넌트의 대체로 사용한다.
calendarValueType속성을 이용하여 연월일시간, 연월일, 연월등을 선택할 수 있도록 지원한다.
컴포넌트의 최상위는 HTML div Tag로 이루어져있다.

Type

uiplugin

Property Summary

ampm: calendarValueType속성이 yearMonthDateTime인 경우 오전, 오후에 해당하는 문자열을 ,로 구분하여 작성한다.
calendarValueType: [default:yearMonthDate, yearMonth, yearMonthDateTime, hourMinute]UI 표시 형식
class: HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.
dateSuffix: [default:일]일(date)에 해당하는 숫자 뒤에 설정할 문자열
id: 컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다
monthNames: 월에 해당하는 숫자를 대체할 문자열로 ,로 구분하여 작성한다.
ref: DataCollection의 value 경로로 컴포넌트와 DataCollection의 value를 binding을 시킬 때 사용하며 "data:"라는 prefix는 필수로 붙여주어야 한다.
title: HTML의 title속성과 동일한 기능으로 명시 된 값을 브라우저에서 마우스 over시 툴팁형태로 표현한다
useLocale: 다국어사용 여부
userData1: 사용자 정의 데이터 속성
userData2: 사용자 정의 데이터 속성
userData3: 사용자 정의 데이터 속성
yearSuffix: [default:년]연도(year)에 해당하는 숫자 뒤에 설정할 문자열로 빈값을 넣을 경우 $blank를 사용한다

Event Summary

onchange: datePicker의 값이 바뀐 경우에 발생한다
onviewchange: 사용자의 제어(키보드나 마우스 조작)에 의해 목록의 값이 변경된 경우에만 발생한다.

Method Summary

getValue( ): 현재 선택된 값을 반환한다
setRef( ref ): ref 속성을 설정하는 기능으로 DataCollection과 연동시 "data:"라는 prefix를 꼭 붙여야한다.
setValue( value ): 컴포넌트에 인자로 넘겨진 value와 같은 값을 가진 항목을 선택한다.
unbindRef( ): ref 바인딩을 해제합니다

Property Detail

ampm: calendarValueType속성이 yearMonthDateTime인 경우 오전, 오후에 해당하는 문자열을 ,로 구분하여 작성한다.
ex)AM,PM
calendarValueType: [default:yearMonthDate, yearMonth, yearMonthDateTime, hourMinute]UI 표시 형식
class: HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.
기본적으로 엔진 내부에서 컴포넌트별로 class를 적용하고 있으며 해당 class를 이용하여 컴포넌트의 css를 공통으로 적용할 수 있다.
dateSuffix: [default:일]일(date)에 해당하는 숫자 뒤에 설정할 문자열
id: 컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다.
monthNames: 월에 해당하는 숫자를 대체할 문자열로 ,로 구분하여 작성한다.
ex) Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
ref: DataCollection의 value 경로로 컴포넌트와 DataCollection의 value를 binding을 시킬 때 사용하며 "data:"라는 prefix는 필수로 붙여주어야 한다.
작성 방법은 data:[DataCollection ID].[Key id 또는 Column id]와 같다. 예시)data:dataMap1.birthday
Instance Data와 연동 할 경우 연동 할 XML 데이터의 XPath를 명시한다. 예시)res/userInfo/birthday
title: HTML의 title속성과 동일한 기능으로 명시 된 값을 브라우저에서 마우스 over시 툴팁형태로 표현한다. 일반적으로 웹접근성 작업 시 설정한다.
useLocale: 다국어사용 여부
userData1: 사용자 정의 데이터 속성. getUserData("userData1") API를 통해 설정한 값을 얻어올 수 있다.
userData2: 사용자 정의 데이터 속성. getUserData("userData2") API를 통해 설정한 값을 얻어올 수 있다.
userData3: 사용자 정의 데이터 속성. getUserData("userData3") API를 통해 설정한 값을 얻어올 수 있다.
yearSuffix: [default:년]연도(year)에 해당하는 숫자 뒤에 설정할 문자열로 빈값을 넣을 경우 $blank를 사용한다.

Event Detail

onchange

datePicker의 값이 바뀐 경우에 발생한다.

onviewchange

사용자의 제어(키보드나 마우스 조작)에 의해 목록의 값이 변경된 경우에만 발생한다.
스크립트를 통해 값이 변경된 경우에는 해당 이벤트가 발생하지 않는다. (native onchange 이벤트 유사.)

Parameter
name	type	description
info	Object	oldValue, newValue, oldSelectedIndex, newSelectedIndex를 포함한 오브젝트를 반환합니다.

Sample

Method Detail

getValue( )

현재 선택된 값을 반환한다.

Return
type	description
String	선택된 항목의 value

Sample

//calendarValueType속성이 설정하지 않은 경우(yearMonthDate 형태) var tmpRs = datePicker1.getValue(); //yyyyMMdd으로 8자리 문자열 반환 //return 예시) "20020415" //calendarValueType속성이 "yearMonthDateTime" 인 경우 var tmpRs = datePicker1.getValue(); //yyyyMMddHHmm으로 12자리 문자열 반환 //return 예시) "200204151758"

setRef( ref )

ref 속성을 설정하는 기능으로 DataCollection과 연동시 "data:"라는 prefix를 꼭 붙여야한다.
명시하지 않는 경우 InstanceData의 XPath로 인식한다.

Parameter
name	type	required	description
ref	String	Y	변경할 ref의 XPath

Sample

//dataMap1의 regDate key와 input1 컴포넌트의 value를 binding 하는 경우 datePicker1.setRef("data:dataMap1.regDate"); //InstanceData의 res/userData/regDate 과 연동 할 경우. datePicker1.setRef("res/userData/regDate");

setValue( value )

컴포넌트에 인자로 넘겨진 value와 같은 값을 가진 항목을 선택한다.
calendarValueType속성의 설정값에 따른 format이 적용된 value이어야 한다.

Parameter
name	type	required	description
value	String	Y	선택하려는 항목의 value

Sample

//calendarValueType속성을 "yearMonthDateTime"로 설정한 경우 datePicker1.setValue("201201012001"); //display 예시 ) 2012년 1월 1일 오후 8시 1분이 선택된다.

unbindRef( )

ref 바인딩을 해제합니다