테스트 사이트 - 개발 중인 베타 버전입니다

datepicker 관련 문의입니다. 채택완료

폭풍회오리 1년 전 조회 1,665

$('.btn2').one('click', function() {

    var d = new Date($('#wr_7').val()); 

    d.setDate(d.getDate() + 30);

    $('#wr_7').val( d.formatYMD() );

});

 

위는 자바스크립트 코드입니다.

 

시작날짜라 wr_7에 담겨져 있고, 여기에 30일을 더해서 종료날짜 wr_8을 변경하려고 하는데, 잘 안되네요

 

wr_8 쪽에 NaN-NaN-NaN 이렇게 출력이 되버립니다.

 

종료날짜 부분에 30일을 더해서 동적으로 출력을 하려면 위 소스코드는 잘못된 것일까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
1년 전

http://sir.kr/data/editor/2404/978180634_1712305856.1928.gif" />

풀코드로 테스트 해봤습니다.

</p>

<p><!doctype html></p>

<p><html lang="en"></p>

<p><head></p>

<p>    <meta charset="UTF-8"></p>

<p>    <meta name="viewport"</p>

<p>          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></p>

<p>    <meta http-equiv="X-UA-Compatible" content="ie=edge"></p>

<p>    <title>Document</title></p>

<p>    <script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a></p>

<p>    <link rel="stylesheet" href="<a href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></a></p>

<p>    <script src="<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></a></p>

<p>    <script></p>

<p>        $(document).ready(function () {</p>

<p>            Date.prototype.formatYMD = function() {</p>

<p>                return (this.getFullYear() + '-' + (this.getMonth() + 1) + '-' + this.getDate()).replace(/-(\d)(?=\D|$)/g, '-0$1');</p>

<p>            };</p>

<p>            $.datepicker.setDefaults({</p>

<p>                dateFormat: 'yy-mm-dd',</p>

<p>                prevText: '이전 달',</p>

<p>                nextText: '다음 달',</p>

<p>                monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],</p>

<p>                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],</p>

<p>                dayNames: ['일', '월', '화', '수', '목', '금', '토'],</p>

<p>                dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],</p>

<p>                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],</p>

<p>                showMonthAfterYear: true,</p>

<p>                yearSuffix: '년'</p>

<p>            });</p>

<p>            $('#wr_7').datepicker({</p>

<p>                dateFormat: 'yy-mm-dd',</p>

<p>                minDate: 0,</p>

<p>                onSelect: function (selected) {</p>

<p>                    var dt = new Date(selected);</p>

<p>                    dt.setDate(dt.getDate() + 30);</p>

<p>                    $('#wr_8').datepicker('option', 'minDate', dt);</p>

<p>                    $('#wr_8').datepicker('setDate', dt);</p>

<p>                }</p>

<p>            });</p>

<p>            $('#wr_8').datepicker({</p>

<p>                dateFormat: 'yy-mm-dd',</p>

<p>                minDate: 0</p>

<p>            });</p>

<p>        });</p>

<p>    </script></p>

<p></head></p>

<p><body></p>

<p><label for="wr_7">광고시작일</label><input type="text" value="<?php echo $wr_7 ?>" id="wr_7" name="wr_7" readonly>

<label for="wr_8">광고종료일</label><input type="text" value="<?php echo $wr_8 ?>" id="wr_8" name="wr_8" readonly></p>

<p></body></p>

<p></html></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

폭풍회오리
1년 전
와 정말 멋지게 작동되네요. 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

1년 전

</p>

<p>$('.btn2').one('click', function() {</p>

<p>    var startDate = new Date($('#wr_7').val());</p>

<p>    var endDate = new Date(startDate);</p>

<p>    endDate.setDate(startDate.getDate() + 30);</p>

<p>    var formattedEndDate = endDate.toISOString().slice(0, 10); </p>

<p>    $('#wr_8').val(formattedEndDate);</p>

<p>});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

폭풍회오리
1년 전
답변 감사합니다. 그런데, 작동이 안됩니다ㅜㅜ
시작일과 종료일 입력 부분은 아래와 같이 되어 있습니다

<label for="wr_7">광고시작일</label><input type="text" value="<?php echo $wr_7 ?>" id="wr_7" name="wr_7" readonly>
<label for="wr_8">광고종료일</label><input type="text" value="<?php echo $wr_8 ?>" id="wr_8" name="wr_8" readonly>

그리고 위 자바스크립트 위쪽 시작부분은 아래와 같습니다
<script>
Date.prototype.formatYMD = function() {
return (this.getFullYear() + '-' + (this.getMonth() + 1) + '-' + this.getDate()).replace(/-(\d)(?=\D|$)/g, '-0$1');
};
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
$('#wr_7').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$('#wr_8').datepicker('option', 'minDate', dt);
}
});
$('#wr_8').datepicker({ dateFormat: 'yy-mm-dd' });

한번만 살펴주시면 감사하겠습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인