제이쿼리 datepicker 변수 및 이벤트 처리 질문
본문
datepicker를 사용하여 input type text에서 특정 날짜를 클릭하면 페이지가 갱신되고, 해당 날짜의 값을 변수로 DB 쿼리에 대입하여 웹에 표현 하려고 하는데요
1. 선택한 날짜 클릭시 페이지 갱신 이벤트
2. 선택한 날짜 변수로 사용
이 두가지를 하고싶은데 구글에 자료는 많은데 이해가 잘 안되네요 ㅠㅠ
고수님들의 조언을 구합니다..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.kr.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$(function () {
$('.input-group.date').datepicker({
calendarWeeks: false,
todayHighlight: true,
autoclose: true,
format: "yyyy-mm-dd",
language: "kr"
});
});
</script>
<section>
<div>
<div class="input-group date" style="width:280px;">
<input type="text" class="form-control" id="to_date" placeholder="날짜 검색"><span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</body>
</html>
답변 2
datepicker onSelect인가 자체적인 ajax 함수가 있는걸로 알고있어요
해당 함수 사용해서 셀릭트시 해당 date값을 가져와서 리로딩하실수있어요
datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var date = $(this).val();
alert('선택하신 날짜는'+date);
}
});
1. 선택한 날짜 클릭시 페이지 갱신 이벤트
Q. 달력모양에서 원하는 날짜를 클릭하면 바로 페이지 새로고침이 일어나야 한다는건가요?
2. 선택한 날짜 변수로 사용
Q. 선택한 날짜를 변수로 사용하고 싶다는건 어떤 얘기인지 정확히 인지가 어렵네요.
A.
질문전체를 보자면 검색을 만들겠다는걸로 보여집니다.
추천하는 방법으로는 날짜를 선택하자마자 페이지 이동이 일어나도록 하는것이 아니라
버튼을 하나 추가하여 input에서 날짜를 받고 button 을 통해 submit 하여
GET 또는 POST 방식으로 원하는 값을 전달하여 DB 검색용 쿼리에 대입하여
검색을 만드는 것을 추천합니다.
form 으로 날짜 검색용 input 과 submit 할 button을 감싸고 form 에서 method 를
get 또는 post로 지정하고 작업해보세요.
말씀하신대로 Button을 만들어서 GET으로 전달받아서 처리하려면 페이지를 하나 더 만들어서 거기에 작업을 해야되는건가요??
근데 제가 하고 싶은거는 날짜 검색(datepicker)이 있고 하단 UI는 고정적으로 날짜별로 데이터만 변경되게 구현하고 싶은데 페이지를 하나 더 만들어버리면 하단 UI가 변경되지 않을까 걱정입니다 ㅜ
별도의 페이지 처리를 하실 필요는 없어요. 동일 페이지 내에서 form 의 action 을 $_SERVER['PHP_SELF'] 처리해서 동일 페이지에서 url 쿼리로 검색 할 수 있도록 만드시면 됩니다.
아~~ 그렇게 처리하는 방법도 있군요 많은 도움되었습니다 감사합니다~~!
