년도와 월을 선택하면 해당월의 마지막 날짜가 자동으로 변경되는 jQuery 를 작성했다.
PHP 와 jQuery 값을 전달하는 방법을 잘 몰라 고생 좀 했다.
jQuery Ajax 를 이용해서 파일 A 에서 전달한 값을 가지고 파일 B(get_LastDay.php)에서 결과를 계산하고 그 결과를 받아서 다시 파일 A에 PHP 변수로는 전달할 수가 없더라. (방법이 있는데 못찾은 것인지는 모름)
년도는 선택하지 않고 월만 선택하는 것도 고려하다보니, 자바스크립트 함수를 사용하지 않고 Ajax 로 전달해서 PHP 함수식을 이용하여 계산된 결과를 받도록 처리했다.
function getLastDay(year, month){
if(month==4 || month==6 || month==9 || month==11)
return 30;
else if(month==2){ //2월
if(year%4 == 0) // 2월, 윤년일 때
return 29;
else // 2월, 윤년이 아닐 때
return 28
} else {
return 31;
}
}
Ajax 로 전달받은 결과는 HTML 을 갱신할 수는 있다.
이 방법을 이용해서 코드를 작성했다.
참고로, 년도와 월을 모두 선택한다면 Ajax 사용하지 않고 위 함수를 이용하여 처리해도 된다.
var year = $("#year option:selected").val();
var month = $("#month option:selected").val();
var lastDate = getLastDay(year, month);
$("#day > option").remove(); // remove all items from list
for(i=1; i<=lastDate; i++){
$("#day").append("<option value='"+ i +"'>"+ i +"</option>");
}
=== 파일 A ===
<?php
date_default_timezone_set('Asia/Seoul');
$YEAR_LAST = date("Y");
$cur_year = $YEAR_LAST;
$cur_month = date("m");
// 현재 월의 마지막 날짜를 일단 선택하도록 처리하고, 년/월을 선택하면 자동으로 변경
$last_day = date("t", mktime(0, 0, 1, $cur_month, 1, $cur_year));
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // html 문서를 다 읽어들인 후
var year;
var month;
$('#year').on('change', function(){
if($("#year option:selected").val() !== ""){
year = $(this).find(":selected").val();
month = $("#month option:selected").val();
if($("#month option:selected").val() !== ""){
$.post('get_LastDay.php',{year:year,month:month}, function(data) {
//alert(data);
$("#day > option").remove(); // remove all items from list
for(i=1; i<=data; i++){
$("#day").append("<option value='"+ i +"'>"+ i +"</option>");
}
});
}
}
});
$('#month').on('change', function(){
if($("#month option:selected").val() !== ""){
year = $("#year option:selected").val();
month = $(this).find(":selected").val();
$.post('get_LastDay.php',{year:year,month:month}, function(data) {
$("#day > option").remove(); // remove all items from list
for(i=1; i<=data; i++){
$("#day").append("<option value='"+ i +"'>"+ i +"</option>");
}
});
}
});
});
</script>
<body>
<label>년도: </label>
<select id="year">
<option value=''>년도</option>
<?php for($i=2010; $i <= $YEAR_LAST; $i++){
echo("<option value='$i'>$i 년</option>");
} ?>
</select>
<select id="month">
<option value=''> 월 </option>
<?php for($i=1; $i <= 12; $i++){
echo("<option value='$i'>$i</option>");
} ?>
</select>
<select id="day">
<option value=''> 일 </option>
<?php for($i=1; $i <= $last_day; $i++){
echo("<option value='$i'>$i</option>");
} ?>
</select>
</body>
</html>
=== 파일 B : get_LastDay.php ===
<?php
$select_year = $_POST['year'];
$select_month = $_POST['month'];
$month_day = Array(31,29,31,30,31,30,31,31,30,31,30,31);
if(isset($select_year) && !empty($select_year) && isset($select_month) && !empty($select_month) ){
// "t"는 두 번째 인자로 넘어온 해당 연,월에 대한 총 일수를 구하기 위한 파라미터
$last_day = date("t", mktime(0, 0, 1, $select_month, 1, $select_year));
} else if(isset($select_month) && !empty($select_month)) {
// 월만 선택한 경우에는 2월의 최대값이 28일지, 29일지 알 수 없으므로 최대 29를 선택하도록 처리
$last_day = $month_day[$select_month-1];
}
echo $last_day;
?>
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [jQuery] MP3 Player (0) | 2016.12.04 |
|---|---|
| [jQuery] PHP 와 자바스크립트(jQuery) 값 전달 이해 (0) | 2016.11.29 |
| [jQuery] option selected 값 읽어오기 및 Ajax 결과 받기 (1) | 2016.11.17 |
| [jQuery] option selected 값 읽어오기 (0) | 2016.11.17 |
| [jQuery] 속성값 읽어오기 (0) | 2016.11.12 |
Link2Me
