White Life Story

jQuery Datepicker CSS Customizing 하여 적용 하기 본문

Develop/Javascript

jQuery Datepicker CSS Customizing 하여 적용 하기

새내기 whitelife 2015.06.09 02:53

개발을 하다보면 빼 놓을 수 없는 것이 한가지 있다. 바로 달력 이다. 개발자를 귀찮게 하는 요소 중 한 가지 인데, 제일 큰 이유는 아래와 같다.


대표적인 라이브러리는 jQuery Datepicker 이다. 하지만 UI 는 그대로 사용 할 수 없다.


제공 되는 서비스에 따라 달력은 여러가지 형태로 제공 되게 된다. 요구 조건에 맞게 변경 하는 방법을 알아 보자.


jquery, jquery ui 라이브러리를 다운로드 한다.


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>


Html 을 작성 한다.


<div id="datepicker"></div>


Datepicker Element 를 생성 한다.


$('#datepicker').datepicker({
    inline: true,
    showOtherMonths: true,
    showMonthAfterYear: true,
    monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토']
});


기본적인 준비는 완료 되었다. 이제 CSS 를 적용 해보자. 간단하게 정리를 해보았다.


  • ui-datepicker: 배경 표시
  • ui-datepicker-title: 년, 월 표시
  • ui-datepicker-header: 요일 표시
  • ui-datepicker-prev: 이전 달 버튼
  • ui-datepicker-next: 이후 달 버튼
  • ui-datepicket table: 일 표시

추가적인 내용은 동적으로 생성 되는 HTML 을 참고 하도록 하자.


샘플 URL: http://jsfiddle.net/whitelife/6mxx8rex/


위 방법을 이용해서 CSS 작업을 한다면, 의도하는 달력을 제작 할 수 있을 것이다.


참고 사이트


0 Comments
댓글쓰기 폼