| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-datepicker></sbux-datepicker> |
||
| 필수 속성 | id, name, uitype | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | inline, popup, range | ||
| 예시) HTML 형태의 개발 |
|---|
|
<script> function evt_keyenter(args){ alert("엔터시 이벤트 :" + args); } </script> <sbux-datepicker id="idxPicker_inline" name="picker_inline" uitype="inline"></sbux-datepicker> <sbux-datepicker id="idxPicker_popup" name="picker_popup" uitype="popup" onkeyenter="evt_keyenter(picker_popup)"></sbux-datepicker> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> $(document).ready(function(){ $('#sbArea').sbDatepicker({ name : 'sbScriptNm', uitype : 'inline' }); }); </script> |
| 속성명 | 설명 / 유형(i:inline,p:popup,r:range) | 비고 | |
|---|---|---|---|
| init | 초기값 | i | p | r | |
| required | 필수 입력 지정 | i | p | r | |
| disabled | 비활성 | i | p | r | |
| disabled-input | input box 만 비활성 | p | r | |
| readonly | 읽기 전용 | i | p | r | |
| readonly-input | input box 만 읽기 전용 | p | r | |
| group-id | 그룹으로 묶일 id | i | p | r | |
| show-weeks | 주(week) 단위 표시 | i | p | r | |
| starting-day | 주(week) 시작의 첫 요일 | i | p | r | |
| min-date | 선택 가능한 최소 일자 | i | p | r | 미만 비활성 |
| max-date | 선택 가능한 최대 일자 | i | p | r | 초과 비활성 |
| format-day-title | 일 달력에 상단 타이틀 | i | p | r | |
| format-month-title | 월 달력에 상단 타이틀 | i | p | r | |
| input-mask | input box내의 masking 설정 | r | |
| input-mask | input box내의 masking 설정 | r | |
| input-only-month | 당일연도 자동 설정 | r | |
| date-format | 화면에 표시되는 포맷 | i | p | r | |
| datepicker-mode | 년,월,일 달력 모양을 변경 | i | p | r | day, month, year |
| show-custom-day | 사용자 지정일 표시 | i | p | r | |
| custom-day-ref | 사용자 지정일 객체 참조 | i | p | r | 배열 또는 객체 참조 |
| button-title | 캘린더 버튼의 title | p | r | 웹접근성 |
| show-button-bar | 하단의 버튼 바 표시 | p | r | |
| current-text | 하단의 금일 버튼 문구 | p | r | |
| clear-text | 하단의 지움 버튼 문구 | p | r | |
| close-text | 하단의 닫기 버튼 문구 | p | r | |
| show-time-bar | 하단의 시간 바 표시 | p | r | |
| show-period-bar | 하단의 기간 바 표시 | r | |
| period-set | 하단의 기간 바 세팅 | r | 1D,1W,1M,1Y |
| double-open | from, to 를 동시 open | r | |
| from-validate-check | 기간 검증 알림,선택금지 사용 여부 | r | |
| clear-incomplete | 데이터 미입력시 자동 clear | p | r | |
| close-on-date-selection | 일자 선택 시 팝업 닫힘 여부 | p | r | |
| peroid-close-on-date-selection | 기간 모두를 선택해야 닫힘 여부 | r | |
| multi-select-mode | 다중 선택 모드 사용여부 | i | |
| split-text | from 과 to 사이의 문자 지정 | r | |
| language | 별도의 언어 설정 | p | r | en,ko,ja,zh |
| placement | 팝업 캘린더 위치 조정 | p | |
| position-top | top 위치 세부 조정 | p | |
| position-left | left 위치 세부 조정 | p | |
| grid-id | 연동되는 그리드 id | i | p | |
| grid-direction | 데이터의 진행 방향 | i | p | |
| grid-status | 그리드 행의 상태 변화 | i | p | |
| grid-event | 연동시점 그리드 이벤트 | i | p | valuechanged(기본값), undefined(이벤트 발생안함) |
| grid-ref | 그리드의 Column Reference 값 | i | p | grid 컬럼 ref 가 name 가 다를때 |
| grid-jit | 입력되는 즉시 반영 | i | p | |
| onclick | 클릭시 이벤트 | p | r | |
| onchange | 값 변경시의 이벤트 | i | p | r | |
| onkeyenter | Enter 키 입력시 이벤트 | p | r | |
| API 명 | 설명 / 유형(i:inline,p:popup,r:range) | 비고 | |
|---|---|---|---|
| SBUxMethod.set | 값을 입력 | i | p | r | |
| SBUxMethod.get | 저장된 값 호출 | i | p | r | |
| SBUxMethod.attr | 속성값 변경 | i | p | r | readonly, disabled |
| SBUxMethod.refresh | 재호출 | i | p | r | |
| SBUxMethod.hide | 감추기 | i | p | r | |
| SBUxMethod.show | 보이기 | i | p | r | |
| SBUxMethod.openDatepicker | 캘린더 팝업 | p | |
| SBUxMethod.openDatepickerRange | 캘린더 팝업 | r | |
| SBUxMethod.closeDatepicker | 캘린더 닫기 | p | |
| SBUxMethod.closeDatepickerRange | 캘린더 닫기 | r | |
| SBUxMethod.setDatepickerMinDate | min-date 설정 | i | p | r | |
| SBUxMethod.setDatepickerMaxDate | max-date 설정 | i | p | r | |
| SBUxMethod.setDatepickerPeriodSet | 기간 설정바에 표시하는 기간설정 | r | |
| SBUxMethod.getAllData | 전체데이터 가져오기 | i | p | r | |
| SBUxMethod.clearAllData | 전체데이터 지우기 | i | p | r | |
| SBUxMethod.getGroupData | group-id 로 묶여진 컴포넌트 데이터 가져오기 | i | p | r | |
| SBUxMethod.clearGroupData | group-id 로 묶여진 컴포넌트 데이터 지우기 | i | p | r | |
| SBUxMethod.changeGroupAttr | group-id 로 묶여진 컴포넌트 데이터 속성변경 | i | p | r | readonly,disabled |
| SBUxMethod.showGroup | group-id 로 묶여진 컴포넌트 보이기 | i | p | r | |
| SBUxMethod.hideGroup | group-id 로 묶여진 컴포넌트 감추기 | i | p | r | |
| SBUxMethod.refreshGroup | group-id 로 묶여진 컴포넌트 refresh | i | p | r | |
| SBUxMethod.render | <sbux-xxx tag >랜더링 | i | p | r | |
| SBUxMethod.validateRequired | required 속성이 있는 컴포넌트 체크 | i | p | r | |
