부트스트랩 달력 렌더러를 출력할 수 있게 정의된 편집 렌더러입니다.
editRenderer 속성으로 편집 시 부트스트랩 달력을 출력하여 날짜를 선택할 수 있게 합니다.
부트스트랩 달력 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.부트스트랩 달력 렌더러를 사용하기 위해서는 bootstrap-datepicker 오픈 소스 JS 및 CSS 를 선행적으로 추가 시켜야 합니다.
bootstrap-datepicker 다운로드 및 출처 : https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
bootstrap-datepicker 라이선스 : Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
myColumnLayout.push({ dataField : "date", headerText : "달력", width:120, dataType : "date", formatString : "yyyy년 mm월 dd일", editRenderer : { type : "BTCalendarRenderer", // 부트스트랩 달력 에디트 렌더러 사용 // 여기서(btOpts 에서) bootstrap-datepicker 의 고유 속성을 설정하십시오. // API : https://bootstrap-datepicker.readthedocs.io/en/latest/options.html btOpts : { language : "ko", todayBtn: "linked" } // end of btOpts } });
Name | Description |
---|---|
btOpts
| Type : Object bootstrap-datepicker 의 고유 속성을 설정할 수 객체입니다. 다음 API 문서를 보고, bootstrap-datepicker 의 고유 속성을 다음과 같이 지정하십시오. bootstrap-datepicker API 문서 : https://bootstrap-datepicker.readthedocs.io/en/latest/options.html editRenderer : { type : "BTCalendarRenderer", // 부트스트랩 달력 에디트 렌더러 사용 btOpts : { language : "ko", // 언어 팩 (한글) todayBtn: "linked", // 오늘 버턴 활성화 여부 clearBtn : true // 날짜 삭제 버턴 활성화 여부 } // end of btOpts } |
defaultFormat
| Type : String 달력으로 날짜를 선택했을 때 실제로 적용될 날짜 형식을 임의로 지정합니다. 예를 들어 기존 데이터의 날짜 형식이 yyyymmdd 형식인 경우, 달력으로 날짜를 선택하면 기본 형식인 yyyy/mm/dd 로 데이터에 적용 됩니다. 이런 경우 기존 데이터 형식과 맞지 않기 때문에 일치 시킬 필요가 있습니다. 유효값은 "yyyy/mm/dd", "yyyy-mm-dd", "yyyymmdd" 등 의 일반적인 형식을 지원합니다. 만약 "UTCTIME" 을 설정하면 UTC 기준 Time 값이 반환됩니다. 참고 : setGridData 로 삽입된 데이터의 날짜 필드 값 포맷 형식과 일치 시키면 편리합니다. 기본값(default) :"yyyy/mm/dd" . |
maxlength
| Type : Number 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다. 기본값(default) :10000 . |
onlyCalendar
| Type : Boolean 사용자에게 직접 입력이 아닌 달력으로만 수정할 수 있도록 할지 여부를 지정합니다. 만약 true 라면 사용자는 오직 출력된 달력에서만 날짜를 선택해서 입력할 수 있습니다. 즉, 이 속성이 true 라면 사용자가 직접 입력해서 날짜(값) 변경을 허용하지 않습니다. 오직 출력된 달력에 의해서만 값을 수정할 수 있습니다. 기본값(default) :true . |
openDirectly
| Type : Boolean 에디팅 진입 시 자동으로 달력을 열지 여부를 지정합니다. 기본값(default) :false . |
showEditorBtnOver
| Type : Boolean 마우스 오버 시 해당 셀에 에디터 버턴을 출력시킬지 여부를 지정합니다. 에디터 버턴을 클릭하면 직접으로 수정 모드로 진입하는 역할을 합니다. 기본값(default) :false . |
showEditorBtnOver
| Type : Boolean 이 속성이 true 라면 셀에 마우스 오버 시 에디터 버턴이 출력됩니다. 기본값(default) :false . |
uncheckDateValue
| Type : String 부트스트랩 달력의 "Clear" 버턴을 클릭했을 때 적용될 텍스트를 지정합니다. 기본값(default) :"-" . |
validator
| Type : Function 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다. 파라메터 설명
함수의 리턴값은 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 . |