데이트 픽커. 모바일 전용 달력 컴포넌트.
Calendar 컴포넌트와 InputCalendar 컴포넌트의 대체로 사용할 수 있음.
CalendarValueType속성을 이용하여 연월일시간, 연월일, 연월등을 선택할 수 있도록 지원.
컴포넌트의 최상위는 HTML <div>를 사용.
Type
- uiplugin
Property Summary
- ampm
- calendarValueType속성이 yearMonthDateTime인 경우 오전, 오후에 해당하는 문자열을 ,로 구분하여 작성한다.
- calendarValueType
- [default:yearMonthDate, yearMonth, yearMonthDateTime, hourMinute]UI 표시 형식
- class
- HTML의 class 속성과 동일한 기능을 제공. CSS 파일이나 style 블럭에 정의한 여러 개의 class를 공백으로 구분하여 적용 가능.
- dateSuffix
- [default:일]일(date)에 해당하는 숫자 뒤에 설정할 문자열
- id
- 컴포넌트 ID.
- monthNames
- 월에 해당하는 숫자를 대체할 문자열로 ,로 구분하여 작성한다.
- ref
- DataCollection의 value 경로. DataCollection의 value와 웹스퀘어 컴포넌트를 바인딩할 때 사용.
- tabIndex
- Tab 키를 이용하여 포커스를 변경할 경우, 해당 컴포넌트에 포커스를 주는 순서.
- title
- HTML의 title 속성과 동일
- useLocale
- [default:false, true] 다국어 사용. 선택 항목의 label에 표현되는 값을 클라이언트의 다국어 key를 이용하여 표현.
- userData1
- 사용자 정의 데이터 속성
- userData2
- 사용자 정의 데이터 속성
- userData3
- 사용자 정의 데이터 속성
- yearSuffix
- [default:년]연도(year)에 해당하는 숫자 뒤에 설정할 문자열로 빈값을 넣을 경우 $blank를 사용한다
Event Summary
- onchange
- datePicker의 값이 바뀐 경우에 발생한다
- onviewchange
- 키보드 또는 마우스 조작을 통해 값이 변경된 경우 발생.
Method Summary
- getDataListInfo( )
- 컴포넌트와 바인딩된 DataList를 반환
- getValue( )
- 현재 선택된 값을 반환한다
- setRef( 설정할 )
- 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를 공백으로 구분하여 적용 가능.
Engine 내부에서 각 컴포넌트 별로 지정된 class를 적용하나, class 속성을 이용하여 컴포넌트의 CSS를 제어 가능. - dateSuffix
-
[default:일]일(date)에 해당하는 숫자 뒤에 설정할 문자열
- id
-
컴포넌트 ID.
컴포넌트 ID는 전역 객체로 할당됨. 각 컴포넌트 ID를 통해 Script에서 해당 컴포넌트에 접근 가능. - monthNames
-
월에 해당하는 숫자를 대체할 문자열로 ,로 구분하여 작성한다.
ex) Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec - ref
-
DataCollection의 value 경로. DataCollection의 value와 웹스퀘어 컴포넌트를 바인딩할 때 사용.
"data:" prefix를 추가하여 data:[DataCollection ID].[Key id 또는 Column id] 형태로 지정해야 함.
DataList와 바인딩된 경우, GridView에서 선택된 행의 값이 바인딩됨.(작성 예) data:dataMap1.dept
Instance Data와 연동 할 경우 연동 할 XML 데이터의 XPath를 명시해야 함.(작성 예) res/userInfo/dept/@value - tabIndex
-
Tab 키를 이용하여 포커스를 변경할 경우, 해당 컴포넌트에 포커스를 주는 순서.
HTML의 tabindex 속성과 동일. - title
-
HTML의 title 속성과 동일. 마우스 오버 시, title로 저장한 값이 툴팁으로 표시됨. 일반적으로 웹접근성 지원용으로 설정.
- useLocale
-
[default:false, true] 다국어 사용. 선택 항목의 label에 표현되는 값을 클라이언트의 다국어 key를 이용하여 표현.
(세부 내용은 다국어 설정 가이드 - 클라이언트 편을 참고.)(옵션 설명) "false" (기본 값)클라이언트의 다국어 key를 이용하지 않음. "true" 클라이언트의 다국어 key를 이용하여 다국어 지원. - userData1
-
사용자 정의 데이터 속성. getUserData("userData1") API를 통해 설정한 값을 얻어올 수 있음.
// 속성 값 얻어오기 예시 getUserData("userData1"); - userData2
-
사용자 정의 데이터 속성. getUserData("userData2") API를 통해 설정한 값을 얻어올 수 있음.
// 속성 값 얻어오기 예시 getUserData("userData2"); - userData3
-
사용자 정의 데이터 속성. getUserData("userData3") API를 통해 설정한 값을 얻어올 수 있음.
// 속성 값 얻어오기 예시 getUserData("userData3"); - yearSuffix
-
[default:년]연도(year)에 해당하는 숫자 뒤에 설정할 문자열로 빈값을 넣을 경우 $blank를 사용한다.
Event Detail
- onchange
-
datePicker의 값이 바뀐 경우에 발생한다.
- onviewchange
-
키보드 또는 마우스 조작을 통해 값이 변경된 경우 발생.
스크립트를 통해 값이 변경된 경우에는 발생하지 않음. (native onchange 이벤트와 유사함.)Parameter name type description info Object oldValue, newValue, oldSelectedIndex, newSelectedIndex를 포함한 오브젝트를 반환합니다. <String> info.oldValue : 이전 value <String> info.newValue : 변경된 value <Number> info.oldSelectedIndex : 이전 index <Number> info.newSelectedIndex : 변경된 index Sample<script ev:event="onviewchange( info )"><![CDATA[ var oldValue = info.oldValue; var newValue = info.newValue; var oldSelectedIndex = info.oldIndex; var newSelectedIndex = info.newIndex; ]]></script>
Method Detail
- getDataListInfo( )
-
컴포넌트와 바인딩된 DataList를 반환.
Return type description Object nodeset, label, value id를 객체로 반환 Sample// 사용 예 datePicker1.getDataListInfo(); - 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 속성을 설정. DataCollection과 연동시 "data:"라는 prefix를 꼭 붙여야 함.
명시하지 않을 경우, InstanceData의 XPath로 인식됨.Parameter name type required description 설정할 String Y ref의 경로 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 바인딩을 해제.