728x90
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title> onlycalendarmain</title>
<style type="text/css">
/*datepicer 버튼 롤오버 시 손가락 모양 표시*/
.ui-datepicker-trigger{cursor: pointer;}
/*datepicer input 롤오버 시 손가락 모양 표시*/
.hasDatepicker{cursor: pointer;}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
#selectTotal{
font-size: 14pt; font-weight: bold;
width:220px;
height: 35px;
}
#reservButton{
font-size: 14px;
width:120px;
height: 35px;
}
#datepicker1 , #datepicker2{
font-size: 12px;
width:300px;
height: 25px;
}
#main_reservation{
font-size: 14pt; font-weight: bold;
width:1200px; height: 35px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd' //Input Display Format 변경
,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
,changeYear: true //콤보박스에서 년 선택 가능
,changeMonth: true //콤보박스에서 월 선택 가능
,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
,buttonText: "달력선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트
,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
//,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트
,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});
////////////////////////////////////////////////////////////////////////////////////////
$("#datepicker1").datepicker();
$("#datepicker2").datepicker();
$("#datepicker1").datepicker('setDate','today');
$("#datepicker2").datepicker('setDate','+1D');
});
</script>
<script type="text/javascript">
function reservCheck( ){ //reservCheck(sessionID){
var checkIn=document.getElementById("datepicker1").value;
var checkOut=document.getElementById("datepicker2").value;
var selectTotal=document.getElementById("selectTotal").value;
if(checkIn==null||checkIn==""){
alert("입실 날짜를 선택해 주세요.");
return false;
}else if(checkOut==null||checkOut==""){
alert("퇴실 날짜를 선택해 주세요.");
return false;
}else if(selectTotal==null||selectTotal==""||selectTotal=="인원수"){
alert("인원수를 선택해 주세요.");
return false;
}else if(checkIn===checkOut){
alert("입실/퇴실 날짜가 같습니다. 다시 확인해 주세요.");
return false;
}
alert( "예약시작날짜= " + checkIn +" 예약퇴실날짜=" + checkOut) ;
selectTotal.innerHTML = str(selectTotal);
}
</script>
<div id="main_reservation">
<div class="main_table_reservation">
<span class="main_reserv3">
<label for="from">입실 날짜</label>
<input type="text" id="datepicker1" name="from" style="border: 1px solid #C6C6C6">
<label for="to">퇴실날짜</label>
<input type="text" id="datepicker2" name="to" style="border: 1px solid #C6C6C6">
</span>
<span class="main_reserv4">
<select id="selectTotal">
<option selected="selected"> 인원수</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</span>
<span class="main_reserv5">
<input type="button" onclick="reservCheck()" value=" 예약하기 " id="reservButton" class="button">
</span>
</div>
</div>
<div id="main_event">
</div>
</body>
</html>728x90
반응형
댓글