코드 해석 좀 부탁드립니다 선배님들 ㅜ ㅜ (datepicker)
본문
안녕하세요 코딩 입문자입니다 !
지금 datepicker로 달력을 구현하려고하는데요....
코드를 긁어와서 붙여넣기하니 작동은 되는데..
초보이다보니 전체적인 코드 이해가 되질 않네요 ㅜㅜ
조금 수정을 해서 적용을 시키려고하는데
혹시 아래의 코드를 해석해주실 선배님 계실까요 ?
<div class="wrap">
<div><input type="text" id="from"></div>
<div><input type="text" id="to"></div>
</div>
<button class="btn">조회</button>
<script>
var rangeDate = 31; // set limit day
var setSdate, setEdate;
$("#from").datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function (selectDate) {
var stxt = selectDate.split("-");
stxt[1] = stxt[1] - 1;
var sdate = new Date(stxt[0], stxt[1], stxt[2]);
var edate = new Date(stxt[0], stxt[1], stxt[2]);
edate.setDate(sdate.getDate() + rangeDate);
$('#to').datepicker('option', {
minDate: selectDate,
beforeShow: function () {
$("#to").datepicker("option", "maxDate", edate);
setSdate = selectDate;
console.log(setSdate)
}
});
//to 설정
}
//from 선택되었을 때
});
$("#to").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (selectDate) {
setEdate = selectDate;
console.log(setEdate)
}
});
$('.btn').on('click', function (e) {
if ($('input#from').val() == '') {
alert('시작일을 선택해주세요.');
$('input#from').focus();
return false;
} else if ($('input#to').val() == '') {
alert('종료일을 선택해주세요.');
$('input#to').focus();
return false;
}
var t1 = $('input#from').val().split("-");
var t2 = $('input#to').val().split("-");
var t1date = new Date(t1[0], t1[1], t1[2]);
var t2date = new Date(t2[0], t2[1], t2[2]);
var diff = t2date - t1date;
var currDay = 24 * 60 * 60 * 1000;
if (parseInt(diff / currDay) > rangeDate) {
alert('로그 조회 기간은 ' + rangeDate + '일을 초과할 수 없습니다.');
return false;
}
alert("성공")
});
//조회 버튼 클릭
</script>
<style>
div.wrap > div{
font-size: 12px;
position: relative;
float: left;
margin-right: 5px;
height: 30px;
line-height: 30px;
vertical-align: middle;
input{
line-height: 30px;
margin: 0;
padding: 0;
padding-left: 5px;
padding-right: 5px;
width: 100px;
}
}
button{
clear: both;
display: block;
line-height: 40px;
margin-top: 80px;
background-color: #eee;
color: #333;
border: 1px solid #666;
padding-left: 20px;
padding-right: 20px;
border-radius: 4px;
}
</style>
감사합니다 !
답변 1
구글에서 datepicker 옵션 이라고 검색을 하시면
여러 블로그 게시글이나 기타 옵션에 대한 설명글이 정리되어있는 것은 확인 할 수 있습니다.
한줄한줄 설명드릴 분이 없을 것 같아 답변남깁니다.
특히 입문자라면 전체적인 흐름을 보고 이해하는데에 시간이 오래 걸립니다.
단순 datepicker 스크립트를 사용하고 거기에 추가 옵션들을
구글링하여 추가해보거나 빼보거나 하면서 해당 스크립트 구조를 파악하시는게
가장 빠릅니다.