웹 애플리케이션에서 날짜와 시간을 체크하는 기능은 필수적
사용자가 유효한 날짜와 시간을 선택하도록 강제할 수 있기 때문
1. 주요 함수 및 메서드 정리
new Date()
- 현재 날짜와 시간을 가져오는 기본 객체
- 예제: var date = new Date();
toISOString()
- 날짜를 YYYY-MM-DDTHH:MM:SS.sssZ 형식의 문자열로 변환함
- split('T')[0]을 사용하여 YYYY-MM-DD 형식으로 변환 가능
- 예제: var today = new Date().toISOString().split('T')[0];
getHours() & getMinutes()
- 현재 시간을 가져오는 메서드
- getHours()는 0~23 값을 반환하며, getMinutes()는 0~59 값을 반환함
- 예제: var hour = new Date().getHours();
padStart(length, padString)
- 문자열의 길이가 지정된 length보다 짧으면 padString을 앞에 추가하여 길이를 맞춤
- 예제: var minutes = String(new Date().getMinutes()).padStart(2, "0");
비교 연산을 통한 날짜 및 시간 검증
- 날짜 비교는 YYYY-MM-DD 형식의 문자열을 직접 비교하여 가능
- 시간 비교는 HHmm 형식으로 변환하여 정수 형태로 비교하는 것이 일반적
var today = new Date().toISOString().split('T')[0];
if (selectedDate < today) {
alert("과거 날짜는 선택할 수 없습니다.");
}
2. 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>날짜 및 시간 체크</title>
</head>
<body>
<form id="frm">
날짜 선택 : <input type="date" name="rdate"><br>
예매 시간 : <select name="rtime">
<option value="">시간선택</option>
<option value="09">09:00</option>
<option value="11">11:00</option>
<option value="14">14:00</option>
<option value="16">16:00</option>
</select>
<input type="button" value="예매" onclick="datecheck()">
</form>
</body>
<script>
function datecheck() {
var edate = frm.rdate.value;
var date = new Date();
var sdate = date.toISOString().split('T')[0];
if (edate < sdate) {
alert("해당 날짜 선택을 잘못 하셨습니다.");
return;
}
var t = date.getHours() + String(date.getMinutes()).padStart(2, "0");
var ut = frm.rtime.value + "00";
if (t > ut) {
alert("현재 선택한 시간은 이미 예매가 끝났습니다.");
} else {
alert("예매 하시겠습니까?");
}
}
</script>
</html>
3. 요약
- new Date()로 현재 날짜와 시간을 가져옴
- toISOString().split('T')[0]로 YYYY-MM-DD 형식 변환
- getHours()와 getMinutes()로 현재 시간 확인
- padStart()로 두 자리 숫자 형식 유지
- 날짜와 시간을 비교하여 유효한 입력인지 검증함
위 기능을 활용하면 날짜와 시간 입력의 유효성을 효과적으로 체크할 수 있음