〜

NEXT STEP RESET

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
function selectDataTo(){
	setTimeout(function(){
		$('#toBd').find('td').each(function(index, el) {
			var select_now_date = $(this).text();
			var select_now_month = $(this).data('month');
			var select_now_year = $(this).data('year');
			var select_now = new Date(select_now_year,select_now_month,select_now_date);
			var select_now_sec = select_now.getTime();
			if(select_now_sec == select_sec){
				$(this).children().addClass('ui-state-active');
			}else if(select_now_sec <= select_return_sec && select_now_sec >= select_sec){
				$(this).children().addClass('ui-state-selected');
			}
		});
	},5);
}
function selectDataFrom(){
	$('#toBd').find('td').each(function(index, el) {
		var select_now_date = $(this).text();
		var select_now_month = $(this).data('month');
		var select_now_year = $(this).data('year');
		var select_now = new Date(select_now_year,select_now_month,select_now_date);
		var select_now_sec = select_now.getTime();
		if(select_now_sec == select_sec){
			$(this).children().addClass('ui-state-active');
		}else{
			$(this).children().removeClass('ui-state-active');
		}
	});
}
function setFromcalendar(){
	$('#formBd').datepicker({
		showOtherMonths: true,
		minDate: 0,
		numberOfMonths: 3,
		dateFormat:'yy-mm-dd',
		dayNamesMin:['S','M','T','W','T','F','S'],
		onSelect: function(dateText, inst) {
			$('#toBd').datepicker('option', 'minDate', dateText);
			$('#from').val(dateText);
			select_date = inst['selectedDay'];
			select_month = inst['selectedMonth'];
			select_year = inst['selectedYear'];
			select_s = new Date(select_year,select_month,select_date);
			select_sec = select_s.getTime();
			selectDataFrom();
			$('.next').addClass('step_on');
		}
	});	
}
function setTocalendar(){
	$('#toBd').datepicker('destroy');
	$('#toBd').removeClass("hasDatepicker");
	$('#toBd').datepicker({
		showOtherMonths: true,
		numberOfMonths: 3,
		dateFormat:'yy-mm-dd',
		dayNamesMin:['S','M','T','W','T','F','S'],
		onSelect: function(dateText, inst) {
			$('#fromBd').datepicker('option', 'maxDate', dateText);
			$('#to').val(dateText);
			select_return_date = inst['selectedDay'];
			select_return_month = inst['selectedMonth'];
			select_return_year = inst['selectedYear'];
			select_return_s = new Date(select_return_year,select_return_month,select_return_date);
			select_return_sec = select_return_s.getTime();
			selectDataTo();
		}
	});	
}
function resetCalendarTo(){
	$('#to,#from').val('');
	$('#toBd').datepicker('destroy');    
	$('#toBd').removeClass("hasDatepicker");
	setTocalendar();
}
$(function() {
	setFromcalendar();
	setTocalendar();
});
$(document).on('click','.next' + '.step_on', function() {
	$('#formBd').css({'display':'none'});
	$('.next').removeClass('step_on');
	$('.prev').addClass('step_on');
});
$(document).on('click','.prev' + '.step_on', function() {
	$('#formBd').css({'display':'block'});
	$('.step').removeClass('step_on');
	resetCalendarTo();
});
</script>
<input id="from" type="text" value=""> 〜 <input id="to" type="text" value="">
<a class="next step">NEXT STEP</a>
<a class="prev step">RESET</a>
<div class="cal" id="toBd"></div>
<div class="cal" id="formBd"></div>
<style type="text/css">
.ui-state-selected{background: #4DB2B6}
.ui-state-active{background: #75567C}
.ui-datepicker{width: 100% !important; font-family: 'Monda', sans-serif; text-align: center;}
.ui-datepicker a{color: #fff;}
.ui-datepicker-calendar{width: 100%;}
.ui-datepicker-group{background: #48C2C2;}
.ui-datepicker-header {color: #fff;padding: 15px;text-transform: uppercase;letter-spacing: 3px;}
.ui-datepicker-calendar thead th{color: #fff; padding:10px;}
.ui-datepicker-calendar th,.ui-datepicker-calendar td{font-size: 14px; color: #378F8F; text-align: center;}
.ui-datepicker-calendar td span{display: block; padding:10px;}
.ui-datepicker-calendar td a{color: #fff; display: block; padding:10px;}
.ui-datepicker-title{clear: both;}
.ui-datepicker-prev{float: left;}
.ui-datepicker-next{float: right;}
.step {background: #BDDADB; display: block; font-family: 'Monda', sans-serif; text-align: center; color: #fff; padding: 10px 0; letter-spacing: 3px; transition:all 0.3s; }
.step_on{background: #75567C; cursor: pointer; }
</style>