맨위로가기
 

SBUx

닫기

Datepicker

년도, 월, 일,시 분을 정해진 데이터 내에서 선택하여 사용하는 캘린더 컴포넌트 입니다.

기본 사항

사항 설명 비고
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
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
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 사항

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.dynamic string 형태로 입력하여 동적 생성 i | p | r
SBUxMethod.render <sbux-xxx tag >랜더링 i | p | r
SBUxMethod.validateRequired required 속성이 있는 컴포넌트 체크 i | p | r