CSS

Bootstrap-Material DateTimePicker 사용법

PT sun 2020. 9. 12. 00:44
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.min.js"></script>
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">




<input type="text" id="entranceDate" class="form-control entrance" placeholder="입학일">
<input type="text" id="graduateDate" class="form-control graduate" placeholder="졸업일">



<script>
	$('#entranceDate').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
	$('#graduateDate').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
</script>

[github]    github.com/T00rk/bootstrap-material-datetimepicker

[example]  t00rk.github.io/bootstrap-material-datetimepicker/

 

저중에 4,5번째 줄 cdn 은 깃허브에서 파일을 받아 내 프로젝트 폴더에 넣고 src 를 직접 적어주었다.

 

 

 

구현한 모습