-
jQuery / jQueryUI datepicker 데이트피커 한글설정 UI커스텀Web dev/jQuery 2022. 10. 30. 13:58728x90반응형
기본 데이트피커 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; }
728x90반응형'Web dev > jQuery' 카테고리의 다른 글
jQuery / class 제어하기 (0) 2022.03.25