요즘 웹을 만드는 중이라 갑자기 프론트 앤 작업을 하고 있어.자바스크립트와 부트스트랩, css는 처음이라는 초가 전혀 없는 매우 방황하고 있다.
습득하면 적어두는 습관이 필요하다고 생각해 기록을 시작하려고 한다.
참고로 이것은 WebForm(C#) 프로젝트이다.
DatePicker link 보통 연습할 때나 작은 프로젝트 할 때는 CDN 방식으로 많이 사용했는데 (: 소스를 링크해서 부트스트랩에 연결하는 방식 ex) https://…처음 로드할 때는 시간이 걸리는데 한번 로딩되면 바로 해당 파일을 가져와 가볍다고 한다.
나와 같은 경우에는 해당 프로젝트를 넣는 곳이 보안상 인터넷 연결이 되지 않기 때문에 부트스트랩 소스를 직접 다운로드하여 적용하는 방식을 사용한다.좀 무겁지만 인터넷 연결이 안 되는 곳에는 이 방법을 써야 한다.
<script src=”../../components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js”></script><script src=”../../components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.kr.min.js”></script>
<script src=”../../components/bootstrap-timepicker/js/moment.min.js”></script><script src=”../../components/bootstrap-timepicker/js/bootstrap-datetimepicker.js”></script src <“..
components 폴더에 date를 가져올 수 있는 관련 소스를 넣어 참조하였다.
Code.aspx[bootstrap]
<label for=”dReqDate” class=”text-center b”> 요청의 </label>//label <div class=”input-groupdate” style=”width:102px;”>//date <inputid=”dReqDate” type=”text”text” onfocus=”this.select()” class=”form-control bootstrap-datepicker”><.e”> </span>//달력 아이콘 사용, </span> </div> <div class=’input-group date’id=”dReq Time” style=”width:88px;”>//time <input type=”text’class=”form-Control” value=”<%=Date Time.Now.To String(“HH:mm:ss”%)>//값은 현재시간 <span class=”
<label for=”dResetDate” class=”text-center b”> 원의 옷인 </label> <div class=”input-groupdate” style=”width:102px;”> <inputid=”dResetDate” type=”text”this.select()” class=”form-Control bootstrap-datepicker” value=”> date’id=’d Reset Time’ style=”width: 88px;”> <input type=”text’class=”form-Control” // 시간값은 고정적으로 넣어주기 때문에 script에 선언 <span class=”input-group-addon”> <span class=”glyphicon-time”> </span> </div>
// 요청일, 원복일 date(.parent(“div”): 아이콘 포함)$(‘.form-control.bootstrap-datepicker’).parent(“div”).datepicker({orientation:”topleft”, language:”kr”, autoclose: true, todayBtn:”linked”, format: ‘yyyyy-mm-ded’, todayHighlight: true};
// 요청일, 원복일 Time $(‘#dReqTime,#dResetTime’). datetimepicker({format: ‘HH:mm:ss’});
//원복일 Time은 디폴트 $(“#dReset Time>input”).val(“23:59:59”);
표출
라벨(style은 추가 설정했다)과 date, time이 나왔음을 확인할 수 있다.달력 아이콘과 시계 아이콘을 눌렀을 때도 같은 창이 뜨는 것을 확인할 수 있다.