[Javascript] 날짜 및 시간 체크

2025. 4. 3. 20:08·Web

웹 애플리케이션에서 날짜와 시간을 체크하는 기능은 필수적

사용자가 유효한 날짜와 시간을 선택하도록 강제할 수 있기 때문

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()로 두 자리 숫자 형식 유지
  • 날짜와 시간을 비교하여 유효한 입력인지 검증함

위 기능을 활용하면 날짜와 시간 입력의 유효성을 효과적으로 체크할 수 있음

저작자표시 비영리 변경금지 (새창열림)
'Web' 카테고리의 다른 글
  • log4j.xml 에러 해결
  • [Logger]
  • [Spring] Session
  • [Spring] I/O, 게시판 응용
9na0
9na0
응애
  • 9na0
    구나딩
    9na0
  • 전체
    오늘
    어제
    • 분류 전체보기 (211)
      • Web (118)
      • Java (28)
      • 데이터베이스 (14)
      • 세팅 (12)
      • 과제 (3)
      • 쪽지시험 (2)
      • 정보처리기사 (4)
      • 서버 (25)
  • 블로그 메뉴

    • 링크

      • 포폴
      • 구깃
    • 공지사항

    • 인기 글

    • 태그

      spring-boot
      file24
      net4
      exam1_1~10
      macbook pro m4
      ab1
      io_dto
      net2
      re2
      re_java10
      Oracle
      java_io1~10
      noticewriteok
      net1
      file25_t
      notice_writer
      file25
      net3
      datalist
      net5~10
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.3
    9na0
    [Javascript] 날짜 및 시간 체크
    상단으로

    티스토리툴바