GS인증 AUIGrid v3.0.15

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

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

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

jQuery UI-datepicker 출처 : https://jqueryui.com/datepicker

jQuery UI-datepicker 의 라이선스는 MIT (https://jquery.org/license/) 으로 상용으로 사용해도 무관합니다.

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

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

JQCalendarRenderer 사용을 위해 jquery-ui JS 와 CSS 를 다음과 같이 추가 하십시오.

<!-- jQuery datepicker MIT 라이센스 -->
<!-- 출처 및 다운로드 : https://jqueryui.com/datepicker-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
....

// AUIGrid 칼럼 레이아웃 설정
var columnLayout = [{
	dataField: "field0",
	headerText: "달력으로만 날짜 수정",
	dataType : "date",
	formatString : "yyyy년 mm월 dd일",
	width:160,
	editRenderer : {
	      type : "JQCalendarRenderer", // jQuery UI-datepicker 달력 렌더러 사용
	      onlyCalendar : true, // 에디터에 달력만 나옴. 즉, Inputer 입력 불가 (기본값 true)
	      // jquery-datepicker 속성을 여기에 설정하십시오.
	      // API : https://api.jqueryui.com/datepicker/#option-appendText
	      jqOpts : {
	    	  changeMonth: true,
				changeYear: true,
				selectOtherMonths : true,
				showOtherMonths: true
	      }
	}
	.....
	.....
}];