달력 렌더러 - 부트스트랩 달력

수정 편집 모드(editing=true 설정) 에서 달력을 출력할 때 bootstrap-datepicker 달력을 선택할 수 있도록 작성된 에디트렌더러입니다.

하나의 웹 사이트에서 통일된 달력 UI 의 필요성으로 인해 당사에서 bootstrap-datepicker 를 AUIGrid 의 에디트렌더러로 작성하였습니다.

따라서 기본적으로 bootstrap-datepicker 의 사용법을 알아야 가능합니다.

bootstrap-datepicker 출처 : https://bootstrap-datepicker.readthedocs.io/en/latest/

bootstrap-datepicker 의 라이선스는 Apache License v2.0 (https://www.apache.org/licenses/LICENSE-2.0) 으로 상용으로 사용해도 무관합니다.

키보드 인터렉션은 기본 달력과 동일하게 지원합니다.(예: 방향키, PgUp, PgDn 등)

사용법은 다음과 같이 bootstrap-datepicker 를 추가하고, 칼럼 레이아웃 정의 시 type 을 "BTCalendarRenderer" 로 지정하십시오.

BTCalendarRenderer 사용을 위해 bootstrap-datepicker JS 와 CSS 를 다음과 같이 추가 하십시오.
<!-- Bootstrap datepicker 아파치 2.0 라이센스 -->
<!-- 출처 및 다운로드 : https://bootstrap-datepicker.readthedocs.io/en/latest/index.html -->
<script src="./external/bootstrap-datepicker-1.6.4-dist/js/bootstrap-datepicker.min.js"></script>
<script src="./external/bootstrap-datepicker-1.6.4-dist/locales/bootstrap-datepicker.ko.min.js"></script>
<link href="./external/bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet">
....// 그리드 칼럼 레이아웃 설정
const columnLayout = [{
		dataField: "field0",
		headerText: "달력으로만 날짜 수정",
		dataType: "date",
		formatString: "yyyy년 mm월 dd일",
		width: 160,
		editRenderer: {
	       type : "BTCalendarRenderer", // bootstrap-datepicker 달력 렌더러 사용
		onlyCalendar: true, // 에디터에 달력만 나옴. 즉, Inputer 입력 불가 (기본값 true)
		// bootstrap-datepicker 속성을 여기에 설정하십시오.
		// API : https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
		btOpts: {
			language: "ko",
			todayBtn: "linked"
		}
	}
	.....
	.....
}];