jQuery / jQueryUI datepicker 데이트피커 한글설정 UI커스텀

기본 데이트피커 UI는 겁나구리다.

그래서 이쁘게 커스텀을 해주었다.

게다가 영어가 기본설정이므로 한글설정도 해주었다.

 

 

1. jquery, jqueryUI를 사용하기 위해서 불러온다.

<script src="js/lib/jquery-1.11.2.min.js"></script>
<script src="js/lib/jquery-ui-1.11.2.min.js"></script>

 

2.한글설정을 해준다.

// 데이트피커 한글설정

function datepickEvt(){
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd',
        prevText: '이전 달',
        nextText: '다음 달',
        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        dayNames: ['일', '월', '화', '수', '목', '금', '토'],
        dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
        showMonthAfterYear: true,
        yearSuffix: '년'
      });
    //실행  
      $(function () {
        $('#datepick').datepicker();
      });
}

 

3. 이쁘게 커스텀 해주었다.

@import url('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css');


/*데이트피커 커스텀*/
.i_datepicker input{cursor: pointer;}
.i_datepicker img{position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url(../img/ico_datepicker.svg) no-repeat center/cover;}
#ui-datepicker-div{z-index: 9 !important;}
.ui-widget-header { border: 0px solid #dddddd; background: #fff; }

.ui-datepicker-calendar>thead>tr>th { font-size: 14px !important; }

.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; }

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; }

.ui-datepicker .ui-datepicker-title { margin: 0 0em; line-height: 16px; text-align: center; font-size: 14px; padding: 0px; font-weight: bold; }

.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 20px; padding-bottom: 10px; width: 300px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); }

.ui-widget.ui-widget-content { border: 1px solid #eee; }

#datepicker:focus>.ui-datepicker { display: block; }

.ui-datepicker-prev,
.ui-datepicker-next { cursor: pointer; }

.ui-datepicker-next { float: right; }

.ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1); }

.ui-datepicker-title { text-align: center; padding: 10px; font-weight: 100; font-size: 20px; }

.ui-datepicker-calendar { width: 100%; }

.ui-datepicker-calendar>thead>tr>th { padding: 5px; font-size: 20px; font-weight: 400; }

.ui-datepicker-calendar>tbody>tr>td>a { color: #000; font-size: 12px !important; font-weight: bold !important; text-decoration: none;}

.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover { cursor: auto; background-color: #fff; }

.ui-datepicker-calendar>tbody>tr>td { border-radius: 100%; width: 44px; height: 30px; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; font-size: 12px; }

.ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6; }

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus { border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b; }

/* .ui-widget-header .ui-icon { background-image: url('./btns.png'); }  */

/* .ui-icon-circle-triangle-e { background-position: -20px 0px; background-size: 36px; }

.ui-icon-circle-triangle-w { background-position: -0px -0px; background-size: 36px; }  */

.ui-datepicker-calendar>tbody>tr>td:first-child a { color: red !important; }

.ui-datepicker-calendar>tbody>tr>td:last-child a { color: #0099ff !important; }

.ui-datepicker-calendar>thead>tr>th:first-child { color: red !important; }

.ui-datepicker-calendar>thead>tr>th:last-child { color: #0099ff !important; }

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 50%; padding-top: 7px; padding-bottom: 8px; }

.inp { padding: 10px 10px; background-color: #f1f1f1; border-radius: 4px; border: 0px; }