달력타임라인

코드

- html

<div class="history-area">
								<div class="history-cont">
									<div class="history-none">
										내역이 없습니다.
									</div>
									<div class="history-item">
										<div class="date">7월 <span class="idx">1</span>일 (목)</div>
										<div class="history">
											<div class="item">중국집 <span class="price">9,000</span>원</div>
											<div class="item">카페 <span class="price">4,200</span>원</div>
										</div>
									</div>
									<div class="history-item">
										<div class="date">7월 <span class="idx">4</span>일 (일)</div>
										<div class="history">
											<div class="item">쇼핑 <span class="price">104,000</span>원</div>
											<div class="item">저녁 <span class="price">14,000</span>원</div>
										</div>
									</div>
									<div class="history-item">
										<div class="date">7월 <span class="idx">5</span>일 (월)</div>
										<div class="history">
											<div class="item">카페 <span class="price">5,600</span>원</div>
										</div>
									</div>
									<div class="history-item">
										<div class="date">7월 <span class="idx">14</span>일 (수)</div>
										<div class="history">
											<div class="item">점심 <span class="price">11,000</span>원</div>
											<div class="item">쇼핑 <span class="price">54,700</span>원</div>
											<div class="item">저녁 <span class="price">12,000</span>원</div>
										</div>
									</div>
									<div class="history-item">
										<div class="date">7월 <span class="idx">27</span>일 (화)</div>
										<div class="history">
											<div class="item">카페 <span class="price">5,600</span>원</div>
											<div class="item">점심 <span class="price">10,000</span>원</div>
											<div class="item">쇼핑 <span class="price">10,054,700</span>원</div>
											<div class="item">저녁 <span class="price">12,000</span>원</div>
											<div class="item">간식 <span class="price">10,000</span>원</div>
										</div>
									</div>
									<div class="history-item">
										<div class="date">7월 <span class="idx">28</span>일 (수)</div>
										<div class="history">
											<div class="item">카페 <span class="price">5,600</span>원</div>
											<div class="item">점심 <span class="price">10,000</span>원</div>
											<div class="item">쇼핑 <span class="price">10,054,700</span>원</div>
											<div class="item">저녁 <span class="price">12,000</span>원</div>
											<div class="item">간식 <span class="price">10,000</span>원</div>
										</div>
									</div>
								</div>
							</div>
						</div>

- css

.timeline-wrap * {
							box-sizing:border-box;
						}

.timeline-wrap *:focus {
							outline:1px solid #fc0;
						}

/* 데이트피커 */
						.js-calendar {
							position:relative;
							z-index:10;
							height:125px;
						}

/* 딤드 */
						.js-calendar .dimmed {
							display:none;
							position:fixed;
							top:0;
							right:0;
							bottom:0;
							left:0;
							z-index:10;
							background-color:rgba(0,0,0,.7);
							opacity:0;
						}
						.js-calendar.open .dimmed {
							display:block;
						}

/* 월이동 셀렉트 */
						.select-year-month {
							position:absolute;
							top:0;
							right:0;
							left:0;
							z-index:60;
							height:42px;
							padding:1px;
							background-color:#fff;
						}
						.select-year-month:before {
							content:'';
							position:absolute;
							top:10px;
							left:90px;
							transform:rotate(45deg);
							width:10px;
							height:10px;
							border:2px solid #000;
							border-top:0;
							border-left:0;
						}
						.select-year-month select {
							-webkit-appearance:none;
							appearance:none;
							position:relative;
							z-index:5;
							height:40px;
							padding:0 40px 0 20px;
							border:0;
							background-color:transparent;
							color:#000;
							font-size:18px;
							font-weight:bold;
							line-height:38px;
						}

/* 데이트피커 영역 */
						.js-calendar .ui-calendar,
						.js-calendar .min-calendar {
							overflow:hidden;
							border-radius:0 0 20px 20px;
							border-bottom:1px solid #f1f1f1;
							background-color:#fff;
						}
						.js-calendar .ui-calendar {
							position:relative;
							z-index:50;
							height:100%;
							transition:all .3s;
						}
						.js-calendar .min-calendar {/* 생성달력 */
							position:absolute;
							right:0;
							bottom:0;
							left:0;
							z-index:60;
						}

/* 테이트피커내 해더영역 숨김 */
						.js-calendar .ui-datepicker-header {
							display:inline-block;
							position:relative;
							z-index:-99999;
							opacity:0;
						}
						.js-calendar .ui-datepicker-header:after {
							content:'';
							display:block;
							clear:both;
						}
						.js-calendar .ui-datepicker-header .ui-datepicker-title {
							float:left;
							font-size:16px;
							line-height:30px;
						}
						.js-calendar .ui-datepicker-header .ui-corner-all {
							float:left;
							position:relative;
							width:30px;
							height:30px;
						}
						.js-calendar .ui-datepicker-header .ui-corner-all .ui-icon {
							position:absolute;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%) rotate(45deg);
							width:10px;
							height:10px;
							border:2px solid #000;
							font-size:0;
							text-indent:-9999px;
							line-height:0;
						}
						.js-calendar .ui-datepicker-header .ui-datepicker-next {
							float:right;
						}
						.js-calendar .ui-datepicker-header .ui-state-disabled {
							opacity:.2;
						}
						.js-calendar .ui-datepicker-header .ui-datepicker-prev .ui-icon {
							border-top:0;
							border-right:0;
						}
						.js-calendar .ui-datepicker-header .ui-datepicker-next .ui-icon {
							border-bottom:0;
							border-left:0;
						}

/* 데이트피커 달력테이블 */
						.js-calendar .ui-calendar table {
							table-layout:fixed;
							width:100%;
						}
						.js-calendar .ui-calendar table thead {
							opacity:0;
						}
						.js-calendar .ui-calendar table th,
						.js-calendar .ui-calendar table td,
						.js-calendar .min-calendar-inner .td-list .btn-date {
							color:#666;
							font-size:14px;
							font-weight:normal;
							text-align:center;
						}
						.js-calendar .ui-calendar table th {
							height:40px;
							color:#000;
						}
						.js-calendar .ui-calendar table td {
							height:50px;
							vertical-align:top;
						}
						.js-calendar .min-calendar-inner .td-list .btn-date {/* 생성달력 */
							float:left;
							width:14.28%;
							height:50px;
						}
						.js-calendar .min-calendar-inner .td-list .btn-date:first-child {
							width:14.32%;
						}

.js-calendar .ui-calendar table td .ui-state-default,
						.js-calendar .min-calendar-inner .td-list .btn-date .ui-state-default {
							display:inline-block;
							position:relative;
							width:25px;
							height:25px;
							border-radius:50%;
							color:#666;
							text-decoration:none;
							line-height:25px;
						}
						.js-calendar .ui-calendar table td span.ui-state-default,
						.js-calendar .min-calendar-inner .td-list .btn-date span.ui-state-default {/* 생성달력 */
							opacity:.5;
						}
						.js-calendar .ui-calendar table td.ui-datepicker-other-month .ui-state-default,
						.js-calendar .min-calendar-inner .td-list .btn-date.ui-datepicker-other-month .ui-state-default {/* 생성달력 */
							opacity:.2;
						}

/* 생성달력 */
						.js-calendar.open .min-calendar {
							display:none;
						}
						.js-calendar .min-calendar-inner {
							overflow:hidden;
							transition: transform .3s;
						}
						.js-calendar .min-calendar-inner .td-list {
							overflow:hidden;
							float:left;
							position:relative;
							width:100%;
						}

/* 일요일 */
						.js-calendar .js-month table td:first-child,
						.js-calendar .ui-calendar table td:first-child .ui-state-default,
						.js-calendar .min-calendar-inner .td-list .btn-date:first-child .ui-state-default{
							color:red;
						}
						/* 오늘 */
						.js-calendar .ui-calendar table td .ui-state-highlight,
						.js-calendar .min-calendar-inner .td-list .btn-date .ui-state-highlight {}
						/* 선택 */
						.js-calendar .ui-calendar table td .ui-state-active,
						.js-calendar .min-calendar-inner .td-list .btn-date .ui-state-active {
							background-color:#fc0;
							color:#000;
							opacity:1;
						}
						/* 내역있음 */
						/*
						.js-calendar .history a:before {
							content:'';
							position:absolute;
							right:-4px;
							bottom:-4px;
							width:4px;
							height:4px;
							border-radius:50%;
							background-color:red;
						}
						*/
						.js-calendar .history {
							position:relative;
						}
						.js-calendar .history .price {
							position:absolute;
							left:50%;
							bottom:14px;
							transform:translateX(-50%);
							color:blue;
							font-size:10px;
							white-space:nowrap;
							letter-spacing:-.5px;
						}

.js-calendar .btn-arr {
							position:fixed;
							top:-99999px;
							left:-99999px;
							font-size:0;
							line-height:0;
							opacity:0;
						}

/* 데이트피커 추가셋팅 영역 */
						.js-calendar .js-month {
							position:absolute;
							top:30px;
							right:0;
							left:0;
							z-index:55;
							background-color:#fff;
						}
						.js-calendar .ui-datepicker-calendar {
							position:absolute;
							right:0;
							bottom:0;
							left:0;
						}
						.js-calendar .js-month table {
							table-layout:fixed;
							width:100%;
						}
						.js-calendar .js-month table td {
							height:40px;
							color:#000;
							font-size:14px;
							text-align:center;
						}

.js-calendar .tog-btn-area {
							position:relative;
							z-index:50;
							height:40px;
							margin-top:1px;
							text-align:center;
						}
						.js-calendar .tog-btn-area .btn-tog {
							position:absolute;
							top:0;
							left:50%;
							transform:translateX(-50%);
							width:100px;
							height:100%;
							border:0;
							background-color:transparent;
							font-size:0;
							text-indent:-99999px;
							line-height:0;
						}
						.js-calendar .tog-btn-area .btn-tog:before {
							content:'';
							position:absolute;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%);
							width:40px;
							height:4px;
							border-radius:3px;
							background-color:#999;
						}
						.js-calendar .tog-btn-area .btn-close {
							display:none;
						}
						.js-calendar.open .tog-btn-area .btn-close {
							display:block;
						}
						.js-calendar.open .tog-btn-area .btn-open {
							display:none;
						}

/* 내역 리스트 영역 */
						.history-area {
							margin-top:40px;
						}
						.history-area .history-none {
							display:none;
						}
						.history-area .history-item {
							display:none;
						}
						.history-area .history-item.on,
						.history-area .history-none.on {
							display:block;
						}

- script

$(function(){
							jsDatepicker();
							jsCalendar();

/* 달력 컨트롤 */
							/* 셀렉트박스 */
							$(document).on('change', '.select-year-month select', function(){
								var date = $(this).find('option:selected').text();
								var yearLen = date.indexOf('.');
								var year = date.substring('0', yearLen);

$(this).closest('.ui-calendar').find('.ui-datepicker-title .ui-datepicker-year').val(year);
								$(this).closest('.ui-calendar').find('.ui-datepicker-title .ui-datepicker-year').change();

var txtLen = date.length;
								var month = date.substring(yearLen + 1, txtLen);//val=0

$(this).closest('.ui-calendar').find('.ui-datepicker-title .ui-datepicker-month').val(month - 1);
								$(this).closest('.ui-calendar').find('.ui-datepicker-title .ui-datepicker-month').change();

jsCalendar();
							});

/* 생성된 달력 날짜 선택 */
							$(document).on('click', '.min-calendar .btn-date a', function(){
								var date = $(this).text();
								$(this).closest('.js-calendar').find('.ui-calendar tbody td a[date=' + date + ']').closest('td').click();
							});

/* 생성된 달력 이전, 다음 버튼 */
							$(document).on('click', '.min-calendar .btn-arr', function(){
								var $claendar = $(this).closest('.min-calendar');
								var $on = $claendar.find('.td-list.on');

if($(this).hasClass('btn-prev')){
									//이전
									if(!$claendar.find('.td-list:first-child').hasClass('on')){
										$on.removeClass('on').prev().addClass('on');
									}
								}else{
									//다음
									if(!$claendar.find('.td-list:last-child').hasClass('on')){
										$on.removeClass('on').next().addClass('on');
									}
								}

var wid = $claendar.find('.td-list').outerWidth();
								var idx = $claendar.find('.td-list.on').index();

$claendar.find('.min-calendar-inner').css({'transform':'translateX(-' + (wid * idx) + 'px)', 'transition':'transform .3s'});
							});

/* 생성된 달력 스와이프 */
							$(document).on('touchstart', '.min-calendar', function(e){
								swStartX = e.originalEvent.changedTouches[0].screenX;
							});

$(document).on('touchmove', '.min-calendar', function(e){
								swMoveX = e.originalEvent.changedTouches[0].screenX;

$(this).find('.min-calendar-inner').css({'margin-left':(swStartX - swMoveX) * -1 + 'px'});
							});

$(document).on('touchend', '.min-calendar', function(e){
								swEndX = e.originalEvent.changedTouches[0].screenX;

$(this).find('.min-calendar-inner').css({'margin-left':'0'});

if(swStartX - swEndX > 100){
									//다음
									$(this).find('.btn-next').click();
								}else if(swStartX - swEndX < -100){
									//이전
									$(this).find('.btn-prev').click();
								}
							});

/* 달력 열고 닫기 */
							$(document).on('click', '.tog-btn-area .btn-tog', function(){
								calOpenClose();
							});

$(document).on('focus', '.ui-datepicker-calendar .ui-state-default', function(){
								$(this).closest('.ui-datepicker-calendar').find('.ui-state-default').removeClass('focus');
								$(this).addClass('focus');

if(!$(this).closest('.js-calendar').hasClass('open')){
									calOpenClose('btn');
								}
							});

$(document).on('blur', '.ui-datepicker-calendar .ui-state-default', function(){
								$(this).closest('.ui-datepicker-calendar').find('.ui-state-default').removeClass('focus');
							});

/* 접근성 탭 loop */
							$(document).on('focus', '.js-calendar.open .tabFocus', function(){
								if($(this).hasClass('tabFirst')){
									//뒤로
									$(this).closest('.js-calendar').find('.tog-btn-area .btn-close').focus();
								}else{
									//앞으로
									$(this).closest('.js-calendar').find('.select-year-month select').focus();
								}
							});

/* 터치로 달력 열고 닫기 제어 */
							$(document).on('touchstart', '.tog-btn-area .btn-tog', function(e){
								calStartY = e.originalEvent.changedTouches[0].screenY;
								calHei = $(this).closest('.js-calendar').find('.ui-calendar').outerHeight();

openH = $('.ui-datepicker-calendar').outerHeight() + $('.ui-datepicker-header').outerHeight();
							});

$(document).on('touchmove', '.tog-btn-area .btn-tog', function(e){
								calMoveY = e.originalEvent.changedTouches[0].screenY;

var calH = $(this).closest('.js-calendar').outerHeight();

if($(this).closest('.js-calendar').hasClass('open')){
									//닫기
									if(calHei + (calMoveY - calStartY) > calH && calMoveY - calStartY < 0){
										$(this).closest('.js-calendar').find('.min-calendar').css({'opacity':'0'});

$(this).closest('.js-calendar').find('.ui-calendar').css({'height':+ calHei + (calMoveY - calStartY) + 'px', 'transition':'inherit'});

$(this).closest('.js-calendar').find('.dimmed').show().css({'opacity':1 + (calMoveY - calStartY) * 0.003});
									}
								}else{
									//열기
									if(calHei + (calMoveY - calStartY) < openH && calMoveY - calStartY > 0){
										$(this).closest('.js-calendar').find('.min-calendar').css({'opacity':'0'});

$(this).closest('.js-calendar').find('.ui-calendar').css({'height':calHei + (calMoveY - calStartY) + 'px', 'transition':'inherit'});

$(this).closest('.js-calendar').find('.dimmed').show().css({'opacity':(calMoveY - calStartY) * 0.007});
									}
								}
							});

$(document).on('touchend', '.tog-btn-area .btn-tog', function(e){
								calEndY = e.originalEvent.changedTouches[0].screenY;

var calH = $(this).closest('.js-calendar').outerHeight();

$(this).closest('.js-calendar').find('.min-calendar').css({'opacity':'1'});

if($(this).closest('.js-calendar').hasClass('open')){
									//닫기
									if(calEndY - calStartY < -80){
										calOpenClose();
									}else{
										$(this).closest('.js-calendar').find('.ui-calendar').css({'height':calHei + 'px'});
										$(this).closest('.js-calendar').find('.dimmed').css({'opacity':'1'}).show();
									}
								}else{
									//열기
									if(calEndY - calStartY > 80){
										calOpenClose();
									}else{
										$(this).closest('.js-calendar').find('.ui-calendar').css({'height':calH + 'px'});
										$(this).closest('.js-calendar').find('.dimmed').hide().css({'opacity':'0'});
									}
								}
							});

/* 달력 월 이동 스와이프 */
							$(document).on('touchstart', '.js-calendar.open .ui-calendar', function(e){
								calStartX = e.originalEvent.changedTouches[0].screenX;
							});

$(document).on('touchend', '.js-calendar.open .ui-calendar', function(e){
								calEndX = e.originalEvent.changedTouches[0].screenX;

if(calStartX - calEndX > 80){
									//다음월
									$(this).find('.ui-datepicker-next').click();
								}else if(calStartX - calEndX < -80){
									//전월
									$(this).find('.ui-datepicker-prev').click();
								}
							});
						});

/* 달력초기셋팅 (datepicker 셋팅) */
						function jsDatepicker(){
							$('.ui-calendar').each(function(){
								var $calendar = $(this);

$(this).datepicker({
									minDate:'-1y',//1년 전까지 조회 가능
									maxDate:0,//오늘날짜 이후 비활성
									showOtherMonths: true,
									prevText:'이전 달',
									nextText:'다음 달',
									changeYear:true,
									changeMonth:true,
									showMonthAfterYear:true,//년, 월 위치 수정
									yearSuffix:'년',
									dayNamesMin:['일', '월', '화', '수', '목', '금', '토'],
									dayNames:['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
									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'],//셀렉트
									onSelect:function(data){
										setTimeout(function(){
											jsCalendar();

$calendar.find('.ui-state-default.ui-state-active').focus();
										}, 100);
									},
									onChangeMonthYear:function(data){
										setTimeout(function(){
											if($('.js-calendar').hasClass('open')){
												var $cal = $('.js-calendar');
												var $uiCal = $cal.find('.ui-calendar');

var calH = $cal.outerHeight();
												var tblH = $cal.find('.ui-datepicker-calendar').outerHeight();
												var headH = $cal.find('.ui-datepicker-header').outerHeight();
												var hei = tblH + headH;

$uiCal.css({'height':hei});
											}

jsCalendar();

$calendar.find('.select-year-month select').focus();
											$('.ui-calendar').bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
												$calendar.find('.select-year-month select').focus();
											});

}, 100);
									},
								});

//데이트피커 요일 추가
								$('.js-month').remove();
								$(this).each(function(){
									var tblMon = '';
									tblMon += '<div class="js-month">';
									tblMon += '<table>';
									tblMon += '<tbody>';
									tblMon += '<tr>';
									tblMon += '<td>일</td>';
									tblMon += '<td>월</td>';
									tblMon += '<td>화</td>';
									tblMon += '<td>수</td>';
									tblMon += '<td>목</td>';
									tblMon += '<td>금</td>';
									tblMon += '<td>토</td>';
									tblMon += '</tr>';
									tblMon += '</tbody>';
									tblMon += '</table>';
									tblMon += '</div>';

$(this).before(tblMon);
								});

var $jsCal = $(this).closest('.js-calendar');

//오늘표시
								setTimeout(function(){
									$jsCal.find('.ui-datepicker-today .ui-state-default').addClass('ui-state-active');
									$jsCal.find('.ui-datepicker-today').each(function(){
										var idxTr = $(this).closest('tr').index();
										var idxTd = $(this).index();

$jsCal.find('.min-calendar .td-list').eq(idxTr).find('.btn-date').eq(idxTd).find('.ui-state-default').addClass('ui-state-active');
									});

if(!$('.history-area .history-item').hasClass('on')){
										$('.history-area .history-none').addClass('on');
									}
								}, 100);
							});

//js-calendar
							$('.js-calendar').each(function(){
								$(this).find('.tog-btn-area').remove();
								$(this).append('<div class="tog-btn-area"><button type="button" class="btn-tog btn-open">열기</button><button type="button" class="btn-tog btn-close">닫기</button></div>');
							});

jsDateSel();
						}

/* 달력 제어 */
						function jsCalendar(){
							$('.timeline-wrap').each(function(){
								var $wrap = $(this);
								var $calendar = $(this).find('.js-calendar');
								var $datepicker = $(this).find('.ui-calendar');

var $tr = $datepicker.find('tbody tr');

var minCal = 'min-calendar';
								var tr = 'td-list';
								var td = 'btn-date';

$datepicker.find('.ui-datepicker-title select').attr('tabindex', '-1');

//데이트피커 날짜 셋팅
								$datepicker.find('td a').each(function(){
									var date = $(this).text();
									$(this).attr('date', date);
								});

//탭인덱스 영역 생성
								$calendar.find('.tabFocus').remove();
								$calendar.prepend('<div class="tabFocus tabFirst" tabindex="0"></div>');
								$calendar.append('<div class="tabFocus tabLast" tabindex="0"></div>');
								$calendar.find('.tabFocus').css({
									'overflow':'hidden',
									'position':'fixed',
									'top':'-99999px',
									'left':'-99999px',
									'z-index':'-99999',
									'width':'0',
									'height':'0',
									'opacity':'0',
								});

//생성된 달력 삭제
								$calendar.find('.' + minCal).remove();

/* 달력 생성 */
								$calendar.append('<div class="' + minCal + '"><div class="' + minCal + '-inner"></div></div>');
								//tr 생성
								$tr.each(function(){
									$calendar.find('.' + minCal + '-inner').append('<div class="' + tr + '"></div>');
									//td 생성
									$(this).find('td').each(function(){
										var inner = $(this).html();

$calendar.find('.' + minCal + '-inner .' + tr).append('<div class="' + td + '">' + inner + '</div>');
										$calendar.find('.' + minCal + '-inner .' + tr + ' .' + td + ' a').attr('href', 'javascript:;');
										$calendar.find('.' + minCal + '-inner .' + tr + ' .' + td + ':nth-child(7)').nextAll().remove();
									});
								});

//이전달, 다음달 비활성 날짜영역
								$datepicker.find('.ui-datepicker-other-month').each(function(){
									var trIdx = $(this).closest('tr').index();
									var tdIdx = $(this).index();

$calendar.find('.' + minCal).find('.td-list').eq(trIdx).find('.btn-date').eq(tdIdx).addClass('ui-datepicker-other-month');
								});

$(this).find('.' + minCal).each(function(){
									//전주, 다음주 버튼 생성
									$(this).append('<button type="button" class="btn-arr btn-prev">이전</button><button type="button" class="btn-arr btn-next">다음</button>');

var wid = $(this).outerWidth();
									var len = $(this).find('.' + tr).length;

$(this).find('.' + tr).css({'width':wid});
									$(this).find('.' + minCal + '-inner').css({'width':wid * len});

if($(this).find('.ui-state-active').length < 1){
										$(this).find('.' + tr + ':first-child').addClass('on');
									}else{
										$(this).find('.ui-state-active').closest('.' + tr).addClass('on');
									}

var idx = $(this).find('.' + tr + '.on').index();
									$(this).find('.' + minCal + '-inner').css({'transform':'translateX(-' + (wid * idx) + 'px)', 'transition':'inherit'});
								});

/* 내역 리스트 영역 */
								$(this).find('.history-item').each(function(){
									var date = $(this).find('.date .idx').text();
									$(this).attr('date', date);

$('.ui-state-default[date=' + date + ']').parent().addClass('history');

/* 금액 합산 */
									$(this).find('.js-price').remove();
									$(this).append('<div class="js-price"></div>');

var newAry = new Array();
									var aryIdx = -1;

$(this).find('.price').each(function(){
										var len = $(this).length;
										var price = $(this).text().replace(/,/g, '');

for(i = 0; i < len; i ++){
											aryIdx ++;
											newAry[aryIdx] = price;
										}
									});

var aryLen = newAry.length;
									var aryIdx = 0;
									for(i = 0; i < aryLen; i ++){
										var afterPri = aryIdx += Number(newAry[i]);
									}
									$('.ui-state-default[date=' + date + ']').parent().append('<div class="price">' + afterPri + '</div>');
									$('.ui-state-default').parent().find('.price').prevAll('.price').remove();
								});

/* 금액 세자리 콤마 */
								$('.ui-state-default').parent().find('.price').each(function(){
									var txt = $(this).text();
									$(this).html(txt.replace(/,/g, ''));

var len = $(this).text().length;
									for (i = 0; i < len; i ++){
										$(this).eq(i).text(commaNum($(this).eq(i).text()));
									}
								});

//선택불가 날짜
								$('.ui-datepicker-calendar td').each(function(){
									if(!$(this).hasClass('history')){
										var date = $(this).text();
										$(this).removeAttr('data-handler').removeAttr('data-event').removeAttr('data-year').removeAttr('data-month');
										$(this).addClass('ui-datepicker-unselectable ui-state-disabled')
										$(this).html('<span class="ui-state-default">' + date + '</span>');
									}
								});

$('.min-calendar .' + td).each(function(){
									if(!$(this).hasClass('history')){
										var date = $(this).text();
										$(this).html('<span class="ui-state-default">' + date + '</span>');
									}
								});

/* 내역 리스트 쇼, 하이드 */
								$datepicker.find('table .ui-state-active').each(function(){
									var date = $(this).attr('date');

$('.history-area .history-item, .history-area .history-none').removeClass('on');
									$('.history-area .history-item[date=' + date + ']').addClass('on');
									if(!$('.history-area .history-item').hasClass('on')){
										$('.history-area .history-none').addClass('on')
									}
								});

/* 셀렉트박스 제어 */
								var sYear = $datepicker.find('.ui-datepicker-title .ui-datepicker-year').val() * 1;
								var sMonth = $datepicker.find('.ui-datepicker-title .ui-datepicker-month').val() * 1;
								var sSel = sYear + '.' + (sMonth + 1);

$datepicker.find('.select-year-month option[value="' + sSel + '"]').prop('selected', true);
							});
						}

function jsDateSel(){
							/* 셀렉트 박스 추가 */
							$('.select-year-month').remove();

$('.ui-calendar .ui-datepicker-title').each(function(){
								nowYear = $(this).find('.ui-datepicker-year').val() * 1;
								var prevYear = nowYear - 1;
								monthNow = ($(this).find('.ui-datepicker-month').val() * 1) + 1;

$('.ui-calendar').prepend('<div class="select-year-month"><select></select></div>');

for(i = 0; i < 13 - monthNow; i ++){
									$('.ui-calendar').find('.select-year-month select').prepend('<option value="' + prevYear + '.' + (i + monthNow) + '">' + prevYear + '.' + (i + monthNow) + '</option>');
								}

$(this).find('.ui-datepicker-month option').each(function(){
									var month = $(this).text();

$('.ui-calendar').find('.select-year-month select').prepend('<option value="' + (nowYear + '.' + month) + '">' + (nowYear + '.' + month) + '</option>');
								});
							});

$('.ui-calendar').find('.select-year-month select option[value="' + nowYear + '.' + monthNow + '"]').prop('selected', true);
						}

/* 달력 열기, 닫기 */
						function calOpenClose(btn){
							$('.js-calendar').each(function(){
								var $this = $(this);

$this.find('.ui-calendar').css({'transition':'height .3s'});
								var transitionEnd = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';

if($this.hasClass('open')){
									//닫기
									var calH = $(this).outerHeight();

$this.find('.ui-calendar').css({'height':calH + 'px'});
									$this.find('.ui-calendar').bind(transitionEnd, function(){
										$this.removeClass('open');
										if(!btn){
											$this.find('.btn-open').focus();
										}
									});

$this.find('.dimmed').fadeOut().css({'opacity':'0'});
								}else{
									//열기
									var tblH = $(this).find('.ui-datepicker-calendar').outerHeight();
									var headH = $(this).find('.ui-datepicker-header').outerHeight();
									var hei = tblH + headH;

$this.addClass('open');
									$this.find('.ui-calendar').css({'height':hei});
									$this.find('.ui-calendar').bind(transitionEnd, function(){
										$this.addClass('open');
										if(!btn){
											$this.find('.btn-close').focus();
										}
									});

$this.find('.dimmed').css({'opacity':'1'}).fadeIn();
								}
							});
						}

/* 금액 세자리 콤마 */
						function commaNum(num){
							var len, point, str;
							num = num + '';
							point = num.length % 3
							len = num.length;
							str = num.substring(0, point);
							while (point < len){
								if (str != '') str += ',';
								str += num.substring(point, point + 3);
								point += 3;
							}
							return str;
						}

예제

코드

- html

- css

- script