AUISoft
AUIGrid 3.0.14 Documentation
JQCalendarRenderer

jQuery UI-datepicker 달력 렌더러를 출력하여 날짜를 선택 할 수 있게 정의된 편집 렌더러입니다.

editRenderer 속성으로 편집 시 jQuery UI-datepicker 달력을 출력하여 날짜를 선택할 수 있게 합니다.

jQuery UI 달력 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.

아래는 설정 예제 입니다.

jQuery UI 달력 렌더러를 사용하기 위해서는 jQuery UI-datepicker 오픈 소스 JS 및 CSS 를 선행적으로 추가 시켜야 합니다.

jQuery UI-datepicker 다운로드 및 출처 : http://jqueryui.com/datepicker

jQuery UI-datepicker 라이선스 : MIT License (https://jquery.org/license/)

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

<!-- jQuery UI  -->
<script type="text/javascript" src="./external/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="./external/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
var columnLayout = [ {
     dataField : "name",
     headerText : "Name",
     width : 140
  }, {
     dataField : "date",
     headerText : "달력",
     width:120,
     dataType : "date",
     formatString : "yyyy년 mm월 dd일",
     editRenderer : {
           type : "JQCalendarRenderer", // jQuery UI-datepicker 달력 에디트 렌더러 사용
           // jquery-datepicker 속성을 여기에 설정하십시오.
           // API : http://api.jqueryui.com/datepicker/#option-appendText
           jqOpts : {
               changeYear: true,
               selectOtherMonths : true,
               showOtherMonths: true
           } // end of jqOpts
     }
  }
}];
NameDescription
defaultFormat
Type : String   Version: 3.0.2

달력으로 날짜를 선택했을 때 실제로 적용될 날짜 형식을 명시적으로 지정합니다.

예를 들어 기존 데이터의 날짜 형식이 "yyyymmdd" 형식인 경우, 달력으로 날짜를 선택하면 기본 형식인 "yyyy/mm/dd" 로 데이터에 적용 됩니다.

이런 경우 기존 데이터 형식과 맞지 않기 때문에 일치 시킬 필요가 있습니다.

유효값은 "yyyy/mm/dd", "yyyy-mm-dd", "yyyymmdd", "yyyymm", "mm/dd/yyyy" 등 의 일반적인 형식을 지원합니다.

지정 가능한 문자는 다음과 같습니다.

  • yy : 연(Year) 2자리로 표현(예:15)
  • yyyy : 연(Year) 4자리로 표현(예:2015)
  • m : 월(Month) 1자리로 표현
  • mm : 월(Month) 2자리로 표현
  • d : 날짜(Day) 1자리수로 표현(예:1)
  • dd : 날짜(Day) 2자리수로 표현(예:01)

만약 "UTCTIME" 을 설정하면 UTC 기준 Time 값이 적용됩니다.

참고 : 원시 데이터(setGridData 로 삽입된 데이터)의 날짜 필드 값 포맷 형식과 일치 시키면 편리합니다.

기본값(default) : "yyyy/mm/dd".
initDateFunction
Type : Function   Version: 3.0.11.10

달력을 열었을 때 처음에 출력시킬 날짜를 지정 할 수 있는 함수입니다.

기본적으로 데이터의 값에 해당되는 날짜로 열립니다. 그러나 원하는 날짜를 출력하고자 하는 경우 이 속성을 설정하십시오.

initDateFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 원래 데이터의 해당 셀 값(value)
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
  • dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField
  • cItem : 설정한 칼럼 레이아웃에서 해당 열에 해당되는 객체 정보 (Object)
initDateFunction : function(rowIndex, columnIndex, value, item, dataField, cItem) {
   if(value === null || value === "") {
       return new Date("2022/01/01"); // null, "" 인 경우 2022/01/01 로 달력 열기
   }
   return new Date(value); 
}

initDateFunction 은 반드시 Date 객체를 반환해야 합니다.

기본값(default) : null.
inputMode
Type : String   Version: 3.0.11

가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.

가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.

기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.

유효값은 다음과 같습니다.

  • text : 사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.
  • decimal : 사용자의 로케일에 맞는 숫자형 키보드를 제공합니다. 기기에 따라 음의 부호(-)는 제공할 수도, 제공하지 않을 수도 있습니다.
  • numeric : 숫자형 키보드를 제공합니다.
  • tel :전화번호 키보드를 제공합니다.
  • search : 검색 입력 칸에 최적화한 가상 키보드를 제공합니다.
  • email : 이메일 입력에 최적화한 가상 키보드를 제공합니다.
  • url : URL 입력에 최적화한 가상 키보드를 제공합니다.
  • none : 가상 키보드를 출력하지 않습니다.
기본값(default) : "text".
jqOpts
Type : Object   Version: 3.0.2

jQuery UI-datepicker 의 고유 속성을 설정할 수 객체입니다.

다음 API 문서를 보고, datepicker 의 고유 속성을 다음과 같이 지정하십시오.

datepicker API 문서 : http://api.jqueryui.com/datepicker/

 editRenderer : {
           type : "JQCalendarRenderer", // jQuery UI-datepicker 달력 에디트 렌더러 사용
           jqOpts : {
               changeYear: true,
               selectOtherMonths : true,
               showOtherMonths: true
           } // end of jqOpts
  }
maxlength
Type : Number   Version: 3.0.2

사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.

기본값(default) : 10000.
onlyCalendar
Type : Boolean   Version: 3.0.2

사용자에게 직접 입력이 아닌 달력으로만 수정할 수 있도록 할지 여부를 지정합니다.

만약 true 라면 사용자는 오직 출력된 달력에서만 날짜를 선택해서 입력할 수 있습니다.

즉, 이 속성이 true 라면 사용자가 직접 입력해서 날짜(값) 변경을 허용하지 않습니다. 오직 출력된 달력에 의해서만 값을 수정할 수 있습니다.

기본값(default) : true.
openDirectly
Type : Boolean   Version: 3.0.2

에디팅 진입 시 자동으로 달력을 열지 여부를 지정합니다.

기본값(default) : false.
showEditorBtn
Type : Boolean   Version: 3.0.4

셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.

에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.

기본값(default) : true.
showEditorBtnOver
Type : Boolean   Version: 3.0.2

셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.

에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.

기본값(default) : false.
showPlaceholder
Type : Boolean   Version: 3.0.11

속성 defaultFormat 설정된 값으로 인푸터(inputer)에 플레이스홀더(placeholder) 를 출력 시킵니다.

기본값(default) : false.
validator
Type : Function   Version: 3.0.11.17

사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.

파라메터 설명

  • oldValue : (String) 수정 전 값
  • newValue : (String) 사용자가 수정 한 값. 즉, 이 값이 유효한지 검사해야 함
  • item : (Object) 해당 행에 출력되고 있는 행 아이템 객체
  • dataField : (String) 해당 칼럼의 데이터필드명
  • fromClipboard : (Boolean) 클립보드(붙여넣기)로 셀 수정한지 여부
  • which : (String or Number) 편집 완료를 어떤 방식으로 수행 했는지에 대한 정보

함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.

예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.

return  { "validate" : false, "message"  : "2016/02/01 형식으로 입력해주세요." }; 

validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.

함수 전체 작성 예는 다음과 같습니다.

 validator : function(oldValue, newValue, item, dataField, fromClipboard) {
      var date, isValid = true;
      if(isNaN(Number(newValue)) ) { //20160201 형태 또는 그냥 1, 2 로 입력한 경우는 허락함.
            if(isNaN(Date.parse(newValue))) { // 그냥 막 입력한 경우 인지 조사. 즉, JS 가 Date 로 파싱할 수 있는 형식인지 조사
                   isValid = false;
            } else {
                   isValid = true;
            }
       }
       // 리턴값은 Object 이며 validate 의 값이 true 라면 패스, false 라면 message 를 띄움
       return { "validate" : isValid, "message"  : "2016/02/01 형식으로 입력해주세요." };
 }

참고 : 클립보드(붙여넣기)인 경우, 유효성 검사 실패 할 때 메세지 출력은 생략됩니다.

기본값(default) : null.