시작날짜, 마감날짜를 datepicker 로 입력 받고 있는데..
본문
시작날짜와 마감날짜 입력 여부와
시작날짜와 마감날짜 크기 비교를 체크하는 조건문을 인터넷에서 주워왔어요.
if(s_day == ''){
alert("시작날짜 입력하세요.");
frm.wr_9.focus();
return false;
}
if(e_day == ''){
alert("마감날짜 입력하세요.");
frm.wr_10.focus();
return false;
}
if( Number(s_day.replace(/-/gi,"")) > Number(e_day.replace(/-/gi,"")) ){
alert("마감날짜가 시작날짜보다 빨리올 수 없습니다.");
frm.wr_10.focus();
return false;
}
근데 문제는, 얼럿창 뜨는 타이망과 얼럿창 클릭 후 처리방법입니다.
1.
얼럿창을 클릭하면 기존에 열려있던 데이트피커창이 닫혀야 하는데, 계속 열려 있어서
얼럿창의 확인 버튼 클릭 후 다시 기존 데이트피커 창을 닫고 입력해야 하네요.
2.
시작날짜 , 마감날짜 , 제목, 내용 필드순으로 있다고 가정 시,
시작날짜 얼럿창은
시작날짜 입력 않은 채 (마감날짜 , 제목, 내용)중 하나를 클릭할 때 가장 먼저 뜨게 하고,
마감날짜 얼럿창은
마감날짜 입력 않은 채, 제목 내용 필드를 클릭했을 때 뜨게 하고,
시작날짜와 마감날짜 모두 입력않은 채 제목 내용 필드 클릭 시
시작날짜 얼럿창만 우선 먼저 뜨도록 하고,
시작날짜, 마감날짜 비교는
두 필드가 모두 입력되었을 때 뜨게 하고자 합니다.
좀 어렵죠? ^^
이용할 땐 몰랐는데, 막상 제작 공부 해보니까 상황별 조건 처리가 참 어렵네요.
질문도 질문이지만, 개발하시는 분들 논점 놓치지 마시라고 적어봅니다.
난이도가 있어서 답변은 별 기대하지 않아요. ^^;; 걍,,,,읽어보시라는 의미에서..
답변 1
Select a Date Range
http://jqueryui.com/datepicker/#date-range
가 적절한듯 해보여서 포맷옵션만 바꿔서 올려봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script type="text/javascript">
$( function() {
var dateFormat = "yy-mm-dd",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
'dateFormat': dateFormat
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
'dateFormat': dateFormat
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
</body>
</html>
오호,,, 데이트피커에서 비교를 체크하면 좋겠단 생각을 했는데,....
고맙습니다. 감사히 잘 쓸게요. ~~~~~~~
