디자인천일공책

Html&JQuery datepicker css 변경하기

페이지 정보

작성자 디자인천일 작성일Date: 2025-03-27 21:11 조회view: 7

본문

datepicker css를 변경하여 디자인을 바꿈

css

/* calendar */
.datepicker {background:url(../img/icon_calendar.png) no-repeat right 50% #fff;}

.ui-datepicker {display:none;width:280px;padding:0;background:#fff;border:none;border-radius:0;z-index:999;}
.ui-datepicker .ui-datepicker-header {position:relative;background:#5bc0de;border:none;border-bottom:solid 1px #ddd;border-radius:0;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position:absolute;top:50%;width:40px;height:50px;text-align:center;line-height:50px;background:none;border:none;border-radius:0;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
transform:translate(0,-50%);
}
.ui-datepicker .ui-datepicker-prev {left:0;background:url(../img/btn_calendar.png) no-repeat 0 0;}
.ui-datepicker .ui-datepicker-next {right:0;background:url(../img/btn_calendar.png) no-repeat -40px 0;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {background:none;}
.ui-datepicker .ui-datepicker-title {margin:0;padding:0;font-family:'Noto Sans KR';color:#fff;font-size:14px;line-height:50px;font-weight:400;text-align:center;}

.ui-datepicker table {width:100%;margin:0;padding:0;border-collapse:collapse;border:none;border-left:solid 1px #ddd;}
.ui-datepicker th {width:40px;height:40px;padding:0;font-family:'Noto Sans KR';color:#fff;text-align:center;line-height:40px;background:#5bc0de;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;}
.ui-datepicker td {width:40px;height:40px;padding:0;font-family:'Lato';text-align:center;line-height:40px !important;background:#fff;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;}
.ui-datepicker td span,
.ui-datepicker td a {display:inline-block;top:0;width:22px;height:22px;padding:0;text-align:center;line-height:18px;background:#fff !important;border:solid 2px #fff !important;border-radius:50%;
-webkit-transition: all 0s ease-out;
-moz-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
transition: all 0s ease-out;
}

.ui-datepicker td:hover {}
.ui-datepicker td span:hover,
.ui-datepicker td a:hover {border:solid 2px #5bc0de !important;}


.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {color:#fff;background:#5bc0de !important;border:solid 2px #5bc0de !important;}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {background:#fff !important;border:solid 2px #5bc0de !important;}

Sample screen show/hide