[javascript] gijgo.com 라이브러리 사용하기 - dateTimePicker 편

일단

gijgo.com 사이트로 가서 라이브러리 를 다운 받는다.


<link href="/니경로/gijgo.min.css" rel="stylesheet" type="text/css">
<script src="/니경로/gijgo-combined-1.9.13/js/gijgo.js"></script>

적당히 파일을 배치후 다운 받은 라이브러리에 가보면


gijgo-combined-1.9.13/js/messages 폴더에 가보면


다국어설정 파일이 있는데 아쉽게도 한국어는 지원하지 않는다.

그래서 대충 구글 번역기 돌려서 한국어용 설정 파일을 만든다.


gijgo-combined-1.9.13/js/messages   에 messages.kr-ko.js , messages.kr-ko.min.js 생성


messages.kr-ko.js 의 내용

gj.dialog.messages['kr-ko'] = {
    Close: '닫기',
    DefaultTitle: '대화'
};
gj.grid.messages['kr-ko'] = {
    First: '처음',
    Previous: '이전',
    Next: '다음',
    Last: '마지막',
    Page: '페이지',
    FirstPageTooltip: '첫 페이지',
    PreviousPageTooltip: '이전 페이지',
    NextPageTooltip: '다음 페이지',
    LastPageTooltip: '마지막 페이지',
    Refresh: '새로고침',
    Of: '의',
    DisplayingRecords: '結果',
    RowsPerPage: '결과:',
    Edit: '편집',
    Delete: '삭제',
    Update: '수정',
    Cancel: '취소',
    NoRecordsFound: '레코드를 찾을 수 없습니다.',
    Loading: '로드중 ...'
};
gj.editor.messages['kr-ko'] = {
    bold: '굵게',
    italic: '기울임 꼴',
    strikethrough: '취소 선',
    underline: '밑줄',
    listBulleted: '기호',
    listNumbered: '목록',
    indentDecrease: '줄이기',
    indentIncrease: '늘이기',
    alignLeft: '왼쪽정렬',
    alignCenter: '가운데정렬',
    alignRight: '오른쪽정렬',
    alignJustify: '자동 정렬',
    undo: '열기',
    redo: '재시도'
};
gj.core.messages['kr-ko'] = {
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthShortNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    weekDaysMin: ['일', '월', '화', '수', '목', '금', '토'],
    weekDaysShort:  ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
    weekDays: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
    am: '오전',
    pm: '오후',
    ok: '확인',
    cancel: '취소',
    titleFormat: 'yyyy년 mmmm'
};

messages.kr-ko.min.js 의 내용


gj.dialog.messages["kr-ko"]={Close:"닫기",DefaultTitle:"대화"},gj.grid.messages["kr-ko"]={First:"처음",Previous:"이전",Next:"다음",Last:"마지막",Page:"페이지",FirstPageTooltip:"첫 페이지",PreviousPageTooltip:"이전 페이지",NextPageTooltip:"다음 페이지",LastPageTooltip:"마지막 페이지",Refresh:"새로고침",Of:"의",DisplayingRecords:"結果",RowsPerPage:"결과:",Edit:"편집",Delete:"삭제",Update:"수정",Cancel:"취소",NoRecordsFound:"레코드를 찾을 수 없습니다.",Loading:"로드중 ..."},gj.editor.messages["kr-ko"]={bold:"굵게",italic:"기울임 꼴",strikethrough:"취소 선",underline:"밑줄",listBulleted:"기호",listNumbered:"목록",indentDecrease:"줄이기",indentIncrease:"늘이기",alignLeft:"왼쪽정렬",alignCenter:"가운데정렬",alignRight:"오른쪽정렬",alignJustify:"자동 정렬",undo:"열기",redo:"재시도"},gj.core.messages["kr-ko"]={monthNames:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],monthShortNames:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],weekDaysMin:["일","월","화","수","목","금","토"],weekDaysShort:["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],weekDays:["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],am:"오전",pm:"오후",ok:"확인",cancel:"취소",titleFormat:"yyyy년 mmmm"};

번역은 틀릴수도 있으니 알아서 수정 하시길

전역으로 사용하기 위해  common.js 에 이벤트를 등록한다.


//달력 포맷 전역 셋팅
$('.datepicker').each(function(){
$(this).datepicker({
icons: {
             rightIcon: '<i class="material-icons">date_range</i>'
        }
,uiLibrary: "bootstrap4"
,keyboardNavigation: true
,locale: 'kr-ko'
,header: true
        ,modal:false
        ,footer:false
        ,calendarWeeks:false
        ,format: "yyyy-mm-dd"
});
});

material-icons 사용을 위해선

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

얘도 추가해준다


사용하고자 하는곳에 datepicker 클래스만 추가 하면 끝

<input id="startDateForm" name="startDateForm" class="form-control datepicker" value="${data.startDate }"/>