웹 개발을 하다 보면 종종 두 날짜 입력 간의 관계를 동적으로 제어해야 할 때가 있다. 예를 들어, 사용자가 출고일(workday)을 선택하면 납기일(deadline)이 출고일 이전 날짜로 설정되지 않도록 자동으로 수정해 주는 기능이 필요할 수 있다. 이런 기능은 사용자가 실수로 잘못된 날짜를 입력하는 것을 방지하고, 데이터를 더 정확히 관리할 수 있도록 돕는다.
오늘은 이런 상황을 해결하기 위해 간단한 JavaScript와 jQuery를 사용하여 날짜 필드 간의 상호작용을 동적으로 처리하는 방법을 알아본다.
요구사항 이해하기
우리가 처리할 상황은 다음과 같다:
- 두 개의 날짜 필드, 출고일(workday)과 납기일(deadline)이 있다.
- 사용자가 출고일(workday)을 선택하면:
- 납기일(deadline)이 출고일(workday) 이전의 날짜라면, 이를 출고일(workday)과 동일한 날짜로 자동 수정해야 한다.
- 사용자는 아무런 불편 없이 자연스럽게 날짜가 조정되는 것을 경험해야 한다.
이를 구현하기 위해 HTML 입력 필드와 JavaScript로 동작을 제어하는 코드를 작성할 것이다.
HTML 구조 만들기
우선 HTML에서 두 날짜 필드를 생성한다. 각 필드에는 고유한 id를 부여하여 JavaScript가 이를 제어할 수 있도록 한다.
<table>
<tr>
<td style="color:blue;">출고일</td>
<td>
<input type="date" name="workday" id="workday" class="form-control" />
</td>
<td style="color:red;">납기일</td>
<td>
<input type="date" name="deadline" id="deadline" class="form-control" />
</td>
</tr>
</table>
위의 코드에서는 출고일(workday)과 납기일(deadline) 두 필드를 테이블 형태로 배치했다. 간단하고 가독성 높은 UI로 사용자가 쉽게 이해할 수 있다.
JavaScript로 동작 구현하기
이제 출고일(workday)의 값이 변경될 때 납기일(deadline)을 자동으로 조정하는 JavaScript 코드를 작성해 보자.
$(document).ready(function () {
$('#workday').on('change', function () {
var workdayValue = $(this).val(); // workday의 선택된 날짜
var deadlineValue = $('#deadline').val(); // deadline의 현재 날짜
if (workdayValue) {
// workday와 deadline 값을 Date 객체로 변환
var workdayDate = new Date(workdayValue);
var deadlineDate = new Date(deadlineValue);
// deadline이 workday 이전 날짜인지 확인
if (deadlineValue && deadlineDate < workdayDate) {
// deadline을 workday와 같은 날짜로 수정
$('#deadline').val(workdayValue);
alert('납기일이 출고일 이전 날짜이므로 출고일과 동일하게 변경되었습니다.');
}
}
});
});
코드 분석
1. change 이벤트 감지
#workday 필드에서 날짜가 선택될 때마다 change 이벤트가 발생한다. 이를 감지하여 이벤트 핸들러가 실행된다.
2. 입력 값 가져오기
workday와 deadline의 값을 각각 val() 메서드를 통해 가져온다. 이 값들은 문자열 형태의 날짜이다.
3. 날짜 비교
가져온 문자열 값을 Date 객체로 변환한 뒤, 두 날짜를 비교한다. deadline이 workday보다 빠른 경우, deadline 값을 workday와 동일하게 수정한다.
4. 사용자 알림
날짜가 자동으로 수정되었음을 사용자가 알 수 있도록 alert 메시지를 표시한다. 이를 통해 수정이 이루어졌음을 즉각적으로 알 수 있다.
동작 확인
위의 코드를 적용하면, 사용자가 출고일(workday)을 변경했을 때 납기일(deadline)이 자연스럽게 업데이트된다. 특히, 납기일이 출고일보다 앞선 경우, 잘못된 입력을 방지하기 위해 출고일과 동일한 날짜로 자동 변경된다.
이를 통해 사용자는 잘못된 데이터를 입력하는 불편을 겪지 않으며, 개발자는 데이터의 무결성을 쉽게 유지할 수 있다.
더 나아가기
이 코드는 기본적인 기능을 제공하지만, 상황에 따라 추가적인 개선이 가능하다. 예를 들어:
- 사용자 경험 개선: alert 대신 UI 상에서 메시지를 보여주는 방식으로 더 부드러운 경험을 제공할 수 있다.
- 다양한 입력 필드와의 연계: 다른 날짜 필드(예: 발주일, 접수일)와도 유사한 로직을 적용하여 전반적인 날짜 입력 관리를 자동화할 수 있다.
이처럼 작은 기능 하나라도 잘 설계하고 구현하면 사용자에게 큰 만족감을 줄 수 있다. 오늘 다룬 날짜 입력 관리 로직은 다양한 웹 애플리케이션에서 유용하게 활용될 수 있는 기본적인 스킬이다.
