jquery UI datepicker の番外編 – インライン状態での期間選択と選択期間のハイライトの実装

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちはToshikuraです。今回のTipsは【jquery UI datepicker の番外編 – インライン状態での期間選択と選択期間のハイライトの実装】です。前回jquery UI datepicker の基本vol4 – カレンダーのインライン表示とインライン状態での期間選択という記事を書きましたが、そこから少しだけ発展して選択期間をハイライトをメモしておきます。ただし本方法ではjQueryDatapicker内にある「Datapickerを複数設置した際の月表示に関するバグ」を回避する必要がありますので若干長いです。 ol li {margin: 10px 0 10px 20px;font-size: 12px;list-style: disc !important;} ol{margin:20px 0;}

実装方法 DEMO

おおまかな概要は、開始日の指定および終了日をぞれぞれgetTime()し該当期間に対してui-state-selectedというクラス名を付与しています。先に書きましたバグの回避にはresetCalendarTo()関数を指定し、特定のタイミングで終了日指定のカレンダーをリセットしています。

<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>

以上になります。

jquery UI datepicker の番外編 – インライン状態での期間選択と選択期間のハイライトの実装

アーカイブ

実装方法 DEMO