jQuery 자체적으로 날짜를 계산하는 기능은 내장되어 있지 않습니다. 하지만 JavaScript의 Date 객체와 관련 메서드들을 사용하여 날짜 계산을 수행한 후 jQuery를 사용하여 결과를 DOM에 반영하는 것은 가능합니다.
아래 예제는 JavaScript의 Date 객체를 사용하여 날짜 계산을 하고, 계산된 결과를 jQuery를 이용해 DOM에 출력하는 방법을 보여줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Calculation with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#calculateButton').click(function() {
// 입력된 날짜를 가져와서 Date 객체로 변환
var inputDate = $('#inputDate').val();
var dateObject = new Date(inputDate);
if (isNaN(dateObject.getTime())) {
$('#result').text('유효한 날짜를 입력하세요.');
} else {
// 30일 후 계산
dateObject.setDate(dateObject.getDate() + 30);
// 계산된 날짜를 원하는 형식으로 포맷
var year = dateObject.getFullYear();
var month = ('0' + (dateObject.getMonth() + 1)).slice(-2);
var day = ('0' + dateObject.getDate()).slice(-2);
var formattedDate = year + '-' + month + '-' + day;
// 결과를 화면에 출력
$('#result').text('30일 후 날짜: ' + formattedDate);
}
});
});
</script>
</head>
<body>
<div>
<label for="inputDate">날짜 입력 (YYYY-MM-DD 형식): </label>
<input type="text" id="inputDate">
<button id="calculateButton">계산</button>
</div>
<div id="result"></div>
</body>
</html>설명:
HTML 구조: 사용자가 날짜를 입력할 수 있는
input요소와 계산 버튼이 있습니다. 계산된 결과는result라는 id를 가진 요소에 출력됩니다.JavaScript (jQuery):
$(document).ready(function() { ... });: 페이지가 로드되면 실행될 함수를 정의합니다.$('#calculateButton').click(function() { ... });: 계산 버튼이 클릭되면 실행될 함수를 정의합니다.
날짜 계산 과정:
var inputDate = $('#inputDate').val();: 사용자가 입력한 날짜를 가져옵니다.var dateObject = new Date(inputDate);: 입력된 문자열을Date객체로 변환합니다.dateObject.setDate(dateObject.getDate() + 30);: 입력된 날짜에서 30일을 더하여 계산합니다.
결과 출력:
- 계산된 날짜는 원하는 형식(YYYY-MM-DD)으로 포맷합니다.
$('#result').text('30일 후 날짜: ' + formattedDate);: 계산된 결과를result요소에 출력합니다.
이 예제를 통해 JavaScript의 Date 객체를 사용하여 날짜 계산을 하고, jQuery를 사용하여 DOM을 조작하는 방법을 이해할 수 있습니다.