2016-01-10

datepicker가 bootstrap3에서는 자잘한 부분들이 많이 바뀌었다.
우선 Bootstrap3 Datetimepicker 메뉴얼을 볼 수 있는 주소는 아래와 같다.

링크 https://eonasdan.github.io/bootstrap-datetimepicker/

자 그럼 이 글의 주제인 setDate설정에 대해서 알아보면, input창을 클릭하지 않아도 기본적으로 특정 값이 이미 입력 되어 있게 하려고 쓰는 옵션이 setDate이다.
기존에는 아래와 같이 썼었다.

$('#dd').datepicker("setDate", new Date(1985,10,01) );

하지만 Bootstrap3 Datetimepicker에서는 위와 같은 방식으로 쓰면 안되고 아래와 같이 써야 한다.

$('#tt').datetimepicker().data('DateTimePicker').date(new Date(1985,11,01,11,30,21));

그리고 위 글에서 왜 datepicker와 datetimepicker를 비교하는가? 하고 의문이 생길수 있는데,
두가지가 사용하는 지시어가 같기 때문에 서로 datetimepicker와 datetimepicker를 동시에 사용예제로 보여주려면 .js파일의 내부 지시자를 바꿔야 하기 때문이다.
게다가 datepicker와 datetimepicker의 사용법은 같은 버전이면 같으니 문제가 되지 않는다.

아래는 실제 예제를 구현해 놓은 부분이다.

<div class="row">
	<div class='col-sm-6'>
		datepicker 
		<input type="text" class="form-control" id="dd"><br>
	</div>
	<div class='col-sm-6'>
		datetimepicker 
		<input type='text' class="form-control" id='tt' />
	</div>
</div>


<link rel="stylesheet" href="/post_inc/datetimepicker/bootstrap-datepicker.css">
<script src="/post_inc/datetimepicker/bootstrap-datepicker.js"></script>

<!-- <link rel="stylesheet" href="/post_inc/datetimepicker/bootstrap-datetimepicker.css">
<script src="/post_inc/datetimepicker/bootstrap-datetimepicker.js"></script> -->

<link rel="stylesheet" href="/post_inc/datetimepicker/bootstrap-datetimepicker_3d.css">
<script src="/post_inc/datetimepicker/moment-with-locales.js"></script>
<script src="/post_inc/datetimepicker/bootstrap-datetimepicker_3d.js"></script>


<script>
$(function(){
	$('#dd').datepicker({format:"yyyy-mm-dd"}).datepicker("setDate", new Date(1985,10,01) );
	$('#tt').datetimepicker({format:"YYYY-MM-DD HH:mm:ss"}).data('DateTimePicker').date(new Date(1985,11,01,11,30,21));
});
</script>

//------------------------ 2016.06.08 추가

bootstrap3 날짜 변경 이벤트 캐치

<div class="row">
	<div class='col-sm-4'>
		<input type='text' class="form-control" id='dpchange'/>
	</div>
	<div class='col-sm-8'>
		<div id="show_date" style="border:1px solid black;padding:5px;">변경된 날짜 표시</div>
	</div>
</div>

<script>
$(function(){
	$('#dpchange').datetimepicker().on('dp.change', function(e){
		$('#show_date').html(new Date(e.date));
	});
});
</script>