JQuery 달력 기능 사용시 발생하는 오류
본문
안녕하세요~
JQuery 달력기능을 사용하다가 문제가 발생해서 도움을 받고싶어서 글을 씁니다.
문제상황은
예약일을 선택하는 경우 평일과 토요일의 시간이 다르게 출력이 되어야하는데
최초로 페이지 진입하는 경우 예약일을 지정하면 시간이 변경되지 않고 기본값을 그대로 보여주고 있습니다.
다른 날짜를 선택하면 해당 요일에 맞춰서 시간이 변경되지만
토요일을 선택한 뒤 평일을 선택하면 시간표가 토요일 시간표가 적용되어 보여집니다.
제 생각에는 JQuery에서 변경된 값을 바로 인식하지 못하고 달력이 다시 선택된 다음에야 값을 인식하는 것 같은데 어떤 부분을 수정해야할 지 감이 안옵니다 ㅠㅠ
고수분들의 많은 도움 부탁드립니다.
해당 페이지는 댓글에 경로 달아두겠습니다 ^^
$.datepicker.regional['ko'] = {
closeText: '닫기',
prevText: '이전달',
nextText: '다음달',
currentText: '오늘',
monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',
'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월',
'7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
dateFormat: 'yymmdd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['ko']);
$('#rDate').datepicker({
showOn: 'button',
buttonImage: '/sub3/images/icon_month_1.png',
buttonImageOnly: true,
buttonText: "달력",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: 'c-99:c+99',
maxDate: '+3m',
beforeShowDay: noDays,
onSelect: function(dateText, inst) {
var year = parseInt(dateText.substr(0, 4), 10);
var month = parseInt(dateText.substr(4, 2), 10);
var day = parseInt(dateText.substr(6), 10);
var day_week = new Date(year, month - 1, day);
var jijum = $('#rJijum').val();
var gubun = $('#rGubun').val();
// 토요일 지점별 종료시간
// 220118 기준 미사/구로/노원만 오후 1시 종료 나머지는 오후 3시 종료
// 220228 추가 장안동 토요일 오후 2시 종료
if(day_week.getDay() == 6){
if(jijum === "1" || jijum === "2" || jijum ==="8"){
$("#rTime").find("option").remove().end().append("\n<option value=''>시간을 선택하세요</option>\n<option value='1'>9:00~9:30</option>\n<option value='2'>9:30~10:00</option>\n<option value='3'>10:00~10:30</option>\n<option value='4'>10:30~11:00</option>\n<option value='5'>11:00~11:30</option>\n<option value='6'>11:30~12:00</option>\n<option value='7'>12:00~13:00</option>\n");
return [false, ""];
} else if (jijum === "4"){
$("#rTime").find("option").remove().end().append("\n<option value=''>시간을 선택하세요</option>\n<option value='1'>9:00~9:30</option>\n<option value='2'>9:30~10:00</option>\n<option value='3'>10:00~10:30</option>\n<option value='4'>10:30~11:00</option>\n<option value='5'>11:00~11:30</option>\n<option value='6'>13:00~13:30</option>\n");
return [false, ""];
}else{
$("#rTime").find("option").remove().end().append("\n<option value=''>시간을 선택하세요</option>\n<option value='1'>9:00~9:30</option>\n<option value='2'>9:30~10:00</option>\n<option value='3'>10:00~10:30</option>\n<option value='4'>10:30~11:00</option>\n<option value='5'>11:00~11:30</option>\n<option value='6'>11:30~12:00</option>\n<option value='7'>12:00~12:30</option>\n<option value='8'>13:30~14:00</option>\n<option value='9'>14:00~14:30</option>\n");
return [false, ""];
}
}else if(day_week.getDay() == 5){
//구로 뇌신경센터 류온화 원장 오후진료 휴진으로 인해 아래 if문 추가
if(jijum === "2" && $("option:selected", this).attr("value") == "8"){
$("#rTime").find("option").remove().end().append("\n<option value=''>시간을 선택하세요</option>\n<option value='1'>9:00~9:30</option>\n<option value='2'>9:30~10:00</option>\n<option value='3'>10:00~10:30</option>\n<option value='4'>10:30~11:00</option>\n<option value='5'>11:00~11:30</option>\n<option value='6'>11:30~12:00</option>");
}
//구로 뇌신경센터 류온화 원장 오후진료 휴진으로 인해 아래 if문 추가 끝
}else{
//전지점 평일 5시 30분까지 예약
$("#rTime").find("option").remove().end().append("\n<option value=''>시간선택</option>\n<option value='1'>9:00~9:30</option>\n<option value='2'>9:30~10:00</option>\n<option value='3'>10:00~10:30</option>\n<option value='4'>10:30~11:00</option>\n<option value='5'>11:00~11:30</option>\n<option value='6'>11:30~12:00</option>\n<option value='8'>13:30~14:00</option>\n<option value='9'>14:00~14:30</option>\n<option value='10'>14:30~15:00</option>\n<option value='11'>15:00~15:30</option>\n<option value='12'>15:30~16:00</option>\n<option value='13'>16:00~16:30</option>\n<option value='14'>16:30~17:00</option>\n<option value='15'>17:00~17:30</option>");
}
}
});
<tr>
<td class="index_title" width="180">예약일</td>
<td class="table_input" style="display:flex">
<input class="box1 input" type="text" style="width:152px;" id="rDate" name="rDate" size=8 maxlength=8 style="width:189px;" readonly title='옆의 달력 아이콘을 클릭하여 날짜를 입력하세요.'/> <!-- <a href="#"><img src="../sub3/images/icon_month_1.png" alt="달력" align="absmiddle"/></a> -->
<input type="hidden" name="rDateHidden" value="<?=$row[rDate]?>">
<select class="select" name="rTime" id="rTime" itemname="진료시간선택" class="box1" style="width:190px;" >
<option value="">시간선택</option>
</select>
<span style="font-size:17px; margin-top:5px; margin-left:15px;">달력에서 년/월/일을 선택해주세요.</span>
</td>
</tr>
답변 1
onSelect 에서 실행되는 함수가 처음에 실행이 안되서 그런거 같습니다.
onSelect 에서 실행하는 함수로 외부로 빼서 예약일자 세팅할때 해당 함수를 실행해보시면 되지 않을까요?
@백수1995 님 답글 달아주셔서 감사합니다 ~ :)
함수를 외부로 뺀다는 말씀이
$('#rDate').datepicker({}) 밖에다 onSelect: function(dateText, inst) {} 안에 있는 내용을 옮겨서 함수로 만들어서 onSelect: 함수이름 이런식으로 실행하라는 말씀일까요???
말씀해주신 내용하고 구글링 더 해서 해결했습니다!!
알려주셔서 감사합니다!
작성자님이 댓글다신 내용 그대로 입니다.
내용을 구글링하셔서 해결하셨으니 이제 님의 지식과 경험치가 +1 되었겠네요 ^^
ㅎㅎ 감사합니다 ^^
답변을 작성하시기 전에 로그인 해주세요.
