달력의 하단에 확인 버튼을 출력한 경우 해당 확인 버튼의 텍스트를 지정합니다.

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

예를 들어 기존 데이터의 날짜 형식이 "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)
• HH : 시(hour) 24시간제 2자리로 표현(예:13)
• MM : 분(minutes) 2자리로 표현(예:30)
• ss : 초(seconds) 2자리로 표현(예:30)

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

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

달력에서 요일의 시작일을 지정합니다.

기본값은 일요일부터 시작합니다. 만약 월요일부터 시작하고자 한다면 이 속성의 값을 1로 설정하십시오.

일요일 - 0, 월요일 - 1, 화요일 - 2 등

일(days) 단위 달력의 상단 월의 포맷 스트링을 지정합니다.

연(years) 단위 달력의 연 포맷 스트링을 지정합니다.

시간 선택 달력에서 시(hour)의 선택 간격을 지정합니다.

시간 선택 달력에서 시(hour)의 선택 리스트를 명시적으로 지정합니다.

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

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

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 객체를 반환해야 합니다.

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

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

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

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

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

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

시간 선택 달력에서 분(minutes)의 선택 간격을 지정합니다.

시간 선택 달력에서 분(minutes)의 선택 리스트를 명시적으로 지정합니다.

월(months) 단위 달력의 월 포맷 스트링을 지정합니다.

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

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

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

달력 출력 시 월(Month) 까지만 표시하는 속성입니다.

이 값이 true 이면 일(day) 선택이 아닌 월 선택 달력으로 표시됩니다. 월 선택 시 유용합니다.

달력에서 날짜 선택 없이 오직 시간(Time) 선택만 가능한 모드로 출력할지 여부를 지정합니다.

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

showPlaceholder 를 설정한 경우 defaultFormat 설정된 값 대신 출력 시킬 플레이스홀더(placeholder)를 설정합니다.

예로 defaultFormat: "yyyy-mm-dd" 로 설정한 경우 플레이스홀더(placeholder)는 동일하게 "yyyy-mm-dd"로 출력됩니다.

이를 "____-__-__" 로 출력하길 원하면 placeholder 속성을 "____-__-__" 로 설정하십시오.

defaultFormat 설정 값과 자릿수(length)를 동일하게 맞춰야 합니다.

시간 선택 달력에서 초(seconds)의 선택 간격을 지정합니다.

시간 선택 달력에서 초(seconds)의 선택 리스트를 명시적으로 지정합니다.

달력의 하단에 확인 버튼을 출력할지 여부를 지정합니다.

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

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

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

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

달력 출력 시 이전 달, 다음 달의 여분의 날짜를 출력 할지 여부를 나타냅니다.

이 값이 true 이면 달력에 앞뒤로 여분의 날짜가 출력됩니다.

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

시간(Time) 선택이 가능한 셀렉트를 출력할지 여부를 지정합니다.

설정하면 시(Hour) : 분(minutes) 를 선택할 수 있는 달력이 출력됩니다.

시간 선택 달력에서 초(seconds) 까지 선택할 수 있는 달력으로 출력할지 여부를 지정합니다.

달력 출력 시 오늘 날짜 선택 버턴을 하단에 출력 할지 여부를 나타냅니다.

달력 출력 시 날짜 선택 해제 버턴을 하단에 출력 할지 여부를 나타냅니다.

"날짜 선택 해제" 란 어느 날짜도 선택되지 않은 값을 말합니다. 즉, 이 값은 공백이 될 수도 있고 사용자가 지정한 값(속성명 : uncheckDateValue) 가 될 수가 있습니다.

달력 상단의 요일 출력 텍스트들의 배열입니다.

showTodayBtn = true 설정 한 경우 오늘 날짜 선택 버턴에 출력할 텍스트를 지정합니다.

showUncheckDateBtn = true 설정 한 경우 날짜 선택 해제 버턴에 출력할 텍스트를 지정합니다.

showUncheckDateBtn = true 설정 한 경우 날짜 선택 해제 버턴 클릭 시 날짜(Date) 대신 적용될 텍스트를 지정합니다.

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

파라메터 설명

• 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, which) {
      const 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 형식으로 입력해주세요." };
 }

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