datepicker 관련 문의입니다.
본문
$('.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
풀코드로 테스트 해봤습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
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() + 30);
$('#wr_8').datepicker('option', 'minDate', dt);
$('#wr_8').datepicker('setDate', dt);
}
});
$('#wr_8').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0
});
});
</script>
</head>
<body>
<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>
</body>
</html>
와 정말 멋지게 작동되네요. 감사합니다
$('.btn2').one('click', function() {
var startDate = new Date($('#wr_7').val());
var endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + 30);
var formattedEndDate = endDate.toISOString().slice(0, 10);
$('#wr_8').val(formattedEndDate);
});
답변 감사합니다. 그런데, 작동이 안됩니다ㅜㅜ
시작일과 종료일 입력 부분은 아래와 같이 되어 있습니다
<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' });
한번만 살펴주시면 감사하겠습니다