반응형
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>
반응형
'javaScript&jQuery' 카테고리의 다른 글
| jQuery를 이용해서 checkbox의 선택한 값 모두 읽어 오기 (0) | 2017.07.25 |
|---|---|
| 자바스크립트 또는 JQuery에서 객체 존재 여부 체크하기 (0) | 2017.03.30 |
| id 저장 쿠키 (0) | 2016.07.22 |
| ajax 이용해서 multipart 데이터 전송하기 (0) | 2016.07.21 |
| jquery.ajax, jquery.getJSON, jquery.post 사용하기 (0) | 2016.07.21 |