본문 바로가기

IT/Bootstrap

bootstrap datepicker (StartDate/EndDate) From / To 이전 날짜 이후 날짜 선택 못하게 하기

728x90



캘린더 사용 시 기간으로 선택 하는 경우 하나의 캘린더에서 처리되면 쉽게 가능하겠지만

입력란을 2개로 나눠서 입력 받는 경우 2개의 datepicker가 연동되어

From 날짜가 To 날짜 보다 작아야하고 To 날짜가 From 날짜보다 커야 합니다. 



그런 경우에 적용 할 수 있는 샘플 코드입니다.


각각의 Date Picker에서 선택 시 SetStartDate 및 setEndDate 를 설정하도록 되어있습니다.

소스 자체는 어려울 것이 없으니 아래 소스코드를 확인해주세요.


	$(".from_date").datepicker({
		format: 'yyyy-mm-dd',
		autoclose: true,
	}).on('changeDate', function (selected) {
		var startDate = new Date(selected.date.valueOf());
		$('.to_date').datepicker('setStartDate', startDate);
	}).on('clearDate', function (selected) {
		$('.to_date').datepicker('setStartDate', null);
	});

	$(".to_date").datepicker({
		format: 'yyyy-mm-dd',
		autoclose: true,
	}).on('changeDate', function (selected) {
		var endDate = new Date(selected.date.valueOf());
		$('.from_date').datepicker('setEndDate', endDate);
	}).on('clearDate', function (selected) {
		$('.from_date').datepicker('setEndDate', null);
	});


728x90