본문 바로가기

javaScript&jQuery

jquery를 이용해서 시작날짜와 종료날짜 비교

반응형

jquery를 이용해서 시작날짜가 종료날짜 보다 작으면 경고창을 띄워준다.


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>시작날짜와 종료날짜 비교</title>

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

$("#mform").submit(function(){

       var startDate = $('#startDate').val();

       var endDate = $('#endDate').val();

       //-을 구분자로 연,월,일로 잘라내어 배열로 반환

       var startArray = startDate.split('-');

       var endArray = endDate.split('-');   

       //배열에 담겨있는 연,월,일을 사용해서 Date 객체 생성

       var start_date = new Date(startArray[0], startArray[1], startArray[2]);

       var end_date = new Date(endArray[0], endArray[1], endArray[2]);

              //날짜를 숫자형태의 날짜 정보로 변환하여 비교한다.

       if(start_date.getTime() > end_date.getTime()) {

           alert("종료날짜보다 시작날짜가 작아야합니다.");

           return false;

       }

    });

});

</script>

</head>

<body>

<form action="event.jsp" id="mform">

이벤트 시작일<input type="date" name="startDate" id="startDate">

이벤트 종료일<input type="date" name="endDate" id="endDate">

<input type="submit" value="전송">

</form>

</body>

</html>

반응형