달력 렌더러는 달력이 출력되어 날짜를 선택 할 수 있게 정의된 편집 렌더러입니다.
달력 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.var columnLayout = [ { dataField : "name", headerText : "Name", width : 140 }, { dataField : "date", headerText : "달력", width:120, dataType : "date", formatString : "yyyy년 mm월 dd일", editRenderer : { type : "CalendarRenderer", showExtraDays : true, titles : ["S", "M", "T", "W", "T", "F", "S"] } } }];
Name | Description |
---|---|
confirmText
| Type : String Version: 3.0.13 달력의 하단에 확인 버튼을 출력한 경우 해당 확인 버튼의 텍스트를 지정합니다. 기본값(default) :"확 인" . |
defaultFormat
| Type : String 달력으로 날짜를 선택했을 때 실제로 적용될 날짜 형식을 명시적으로 지정합니다. 예를 들어 기존 데이터의 날짜 형식이 "yyyymmdd" 형식인 경우, 달력으로 날짜를 선택하면 기본 형식인 "yyyy/mm/dd" 로 데이터에 적용 됩니다. 이런 경우 기존 데이터 형식과 맞지 않기 때문에 일치 시킬 필요가 있습니다. 유효값은 "yyyy/mm/dd", "yyyy-mm-dd", "yyyymmdd", "yyyymm", "mm/dd/yyyy" 등 의 일반적인 형식을 지원합니다. 지정 가능한 문자는 다음과 같습니다.
만약 "UTCTIME" 을 설정하면 UTC 기준 Time 값이 적용됩니다. 참고 : 원시 데이터(setGridData 로 삽입된 데이터)의 날짜 필드 값 포맷 형식과 일치 시키면 편리합니다. 기본값(default) :"yyyy/mm/dd" . |
firstDay
| Type : Number Version: 3.0.7 달력에서 요일의 시작일을 지정합니다. 기본값은 일요일부터 시작합니다. 만약 월요일부터 시작하고자 한다면 이 속성의 값을 1로 설정하십시오. 일요일 - 0, 월요일 - 1, 화요일 - 2 등 기본값(default) :0 . |
formatMonthString
| Type : String 일(days) 단위 달력의 상단 월의 포맷 스트링을 지정합니다. 기본값(default) :"yyyy년 mm월" . |
formatYearString
| Type : String 연(years) 단위 달력의 연 포맷 스트링을 지정합니다. 기본값(default) :"yyyy년" . |
hourInterval
| Type : Number Version: 3.0.13 시간 선택 달력에서 시(hour)의 선택 간격을 지정합니다. 기본값(default) :1 . |
hourList
| Type : Array Version: 3.0.13 시간 선택 달력에서 시(hour)의 선택 리스트를 명시적으로 지정합니다. 기본값(default) :null . |
initDateFunction
| Type : Function Version: 3.0.11.10 달력을 열었을 때 처음에 출력시킬 날짜를 지정 할 수 있는 함수입니다. 기본적으로 데이터의 값에 해당되는 날짜로 열립니다. 그러나 원하는 날짜를 출력하고자 하는 경우 이 속성을 설정하십시오. initDateFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
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" . |
maxlength
| Type : Number 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다. 기본값(default) :10000 . |
minInterval
| Type : Number Version: 3.0.13 시간 선택 달력에서 분(minutes)의 선택 간격을 지정합니다. 기본값(default) :1 . |
minList
| Type : Array Version: 3.0.13 시간 선택 달력에서 분(minutes)의 선택 리스트를 명시적으로 지정합니다. 기본값(default) :null . |
monthTitleString
| Type : String 월(months) 단위 달력의 월 포맷 스트링을 지정합니다. 기본값(default) :"m월" . |
onlyCalendar
| Type : Boolean 사용자에게 직접 입력이 아닌 달력으로만 수정할 수 있도록 할지 여부를 지정합니다. 만약 true 라면 사용자는 오직 출력된 달력에서만 날짜를 선택해서 입력할 수 있습니다. 즉, 이 속성이 true 라면 사용자가 직접 입력해서 날짜(값) 변경을 허용하지 않습니다. 오직 출력된 달력에 의해서만 값을 수정할 수 있습니다. 기본값(default) :true . |
onlyMonthMode
| Type : Boolean 달력 출력 시 월(Month) 까지만 표시하는 속성입니다. 이 값이 true 이면 일(day) 선택이 아닌 월 선택 달력으로 표시됩니다. 월 선택 시 유용합니다. 기본값(default) :false . |
onlyTimeMode
| Type : Boolean Version: 3.0.13 달력에서 날짜 선택 없이 오직 시간(Time) 선택만 가능한 모드로 출력할지 여부를 지정합니다. 기본값(default) :false . |
openDirectly
| Type : Boolean 에디팅 진입 시 자동으로 달력을 열지 여부를 지정합니다. 기본값(default) :false . |
placeholder
| Type : String Version: 3.0.11 showPlaceholder 를 설정한 경우 defaultFormat 설정된 값 대신 출력 시킬 플레이스홀더(placeholder)를 설정합니다. 예로 defaultFormat: "yyyy-mm-dd" 로 설정한 경우 플레이스홀더(placeholder)는 동일하게 "yyyy-mm-dd"로 출력됩니다. 이를 "____-__-__" 로 출력하길 원하면 placeholder 속성을 "____-__-__" 로 설정하십시오. defaultFormat 설정 값과 자릿수(length)를 동일하게 맞춰야 합니다. 기본값(default) :"" . |
secInterval
| Type : Number Version: 3.0.13 시간 선택 달력에서 초(seconds)의 선택 간격을 지정합니다. 기본값(default) :1 . |
secList
| Type : Array Version: 3.0.13 시간 선택 달력에서 초(seconds)의 선택 리스트를 명시적으로 지정합니다. 기본값(default) :null . |
showConfirmBtn
| Type : Boolean Version: 3.0.13 달력의 하단에 확인 버튼을 출력할지 여부를 지정합니다. 기본값(default) :false . |
showEditorBtn
| Type : Boolean Version: 3.0.4 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다. 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다. 기본값(default) :true . |
showEditorBtnOver
| Type : Boolean 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다. 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다. 기본값(default) :false . |
showExtraDays
| Type : Boolean 달력 출력 시 이전 달, 다음 달의 여분의 날짜를 출력 할지 여부를 나타냅니다. 이 값이 true 이면 달력에 앞뒤로 여분의 날짜가 출력됩니다. 기본값(default) :false . |
showPlaceholder
| Type : Boolean Version: 3.0.11 속성 defaultFormat 설정된 값으로 인푸터(inputer)에 플레이스홀더(placeholder) 를 출력 시킵니다. 기본값(default) :false . |
showTimePicker
| Type : Boolean Version: 3.0.13 시간(Time) 선택이 가능한 셀렉트를 출력할지 여부를 지정합니다. 설정하면 시(Hour) : 분(minutes) 를 선택할 수 있는 달력이 출력됩니다. 기본값(default) :false . |
showTimeSecond
| Type : Boolean Version: 3.0.13 시간 선택 달력에서 초(seconds) 까지 선택할 수 있는 달력으로 출력할지 여부를 지정합니다. 기본값(default) :false . |
showTodayBtn
| Type : Boolean 달력 출력 시 오늘 날짜 선택 버턴을 하단에 출력 할지 여부를 나타냅니다. 기본값(default) :false . |
showUncheckDateBtn
| Type : Boolean 달력 출력 시 날짜 선택 해제 버턴을 하단에 출력 할지 여부를 나타냅니다. "날짜 선택 해제" 란 어느 날짜도 선택되지 않은 값을 말합니다. 즉, 이 값은 공백이 될 수도 있고 사용자가 지정한 값(속성명 : uncheckDateValue) 가 될 수가 있습니다. 기본값(default) :false . |
titles
| Type : Array 달력 상단의 요일 출력 텍스트들의 배열입니다. 기본값(default) :["일", "월", "화", "수", "목", "금", "토"] . |
todayText
| Type : String showTodayBtn = true 설정 한 경우 오늘 날짜 선택 버턴에 출력할 텍스트를 지정합니다. 기본값(default) :"오늘 선택" . |
uncheckDateText
| Type : String showUncheckDateBtn = true 설정 한 경우 날짜 선택 해제 버턴에 출력할 텍스트를 지정합니다. 기본값(default) :"날짜 선택 해제" . |
uncheckDateValue
| Type : String showUncheckDateBtn = true 설정 한 경우 날짜 선택 해제 버턴 클릭 시 날짜(Date) 대신 적용될 텍스트를 지정합니다. 기본값(default) :"-" . |
validator
| Type : Function Version: 3.0.11.17 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다. 파라메터 설명
함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오. 예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오. return { "validate" : false, "message" : "2016/02/01 형식으로 입력해주세요." }; validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다. 함수 전체 작성 예는 다음과 같습니다. validator : function(oldValue, newValue, item, dataField, fromClipboard, which) { 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 . |