에스크원상담스킨 날짜선택기를 이용해 요금계산 코드 질문입니다.

에스크원상담스킨 날짜선택기를 이용해 요금계산 코드를 넣었는데 시간선택창을 오늘날부터 포함되는 시간일때 오늘포함한 일로 나오게 하고 싶습니다.

현재 가격이 제1여객터미널 실외의 경우 3일까지는 3만원인데 오늘 날짜로도 포함된 시간을 선택해도 오늘을 포함안시키고 3일로 나와 3만원이 되더라고요 

 

아무래도 시간도 같이 선택을 하게되면 예시를 들어서 

인도일자 // 5월 7일 오후 1시 선택 

인수일자 // 5월 10일 오후 3시 선택

오늘 오후 1시에 맡기러가는 것이니 오늘 날짜를 포함해서 10일까지는 총 4일이니 4일요금이 나오도록 할 수가 있나요 ?


http://xn--ob0bq8i4pswsbqxch1hexawfu68edia.com/?page_id=18

혹시 몰라 링크 남깁니다 ㅠㅠ 
 

<?php
if(isset($_GET['ymd'])){
	$ymd = date('Y-m-d', strtotime($_GET['ymd']));
}
$today = date('Y-m-d', current_time('timestamp'));
?>
<div class="kboard-attr-row">
	<label class="attr-name" for="kboard_option_start_date"><?php echo __('인도일시', 'kboard-cross-calendar')?></label>
	<div class="attr-value">
		<div class="calendar-event-start-date-set">
			<input type="text" class="datepicker" id="kboard_option_start_date" name="kboard_option_start_date" value="<?php echo $content->option->start_date ? $content->option->start_date : (isset($ymd) ? $ymd : $today)?>" onchange="kboard_set_date()" title="<?php echo __('Start Date Setting', 'kboard-cross-calendar')?>" readonly>
			<input type="text" class="timepicker" name="kboard_option_start_time" maxlength="5" value="<?php echo $content->option->start_time ? $content->option->start_time : date('H:i', strtotime('9:00'))?>" title="<?php echo __('Start Time Setting', 'kboard-cross-calendar')?>">
		</div>
	</div>
</div>

<div class="kboard-attr-row">
	<label class="attr-name" for="kboard_option_end_date"><?php echo __('인수일시', 'kboard-cross-calendar')?></label>
	<div class="attr-value">
		<div class="calendar-event-end-date-set">
			<input type="text" class="datepicker" id="kboard_option_end_date" name="kboard_option_end_date" value="<?php echo $content->option->end_date ? $content->option->end_date : (isset($ymd) ? $ymd : $today)?>"onchange="kboard_set_date()" title="<?php echo __('End Date Setting', 'kboard-cross-calendar')?>" readonly>
			<input type="text" class="timepicker" name="kboard_option_end_time" maxlength="5" value="<?php echo $content->option->end_time ? $content->option->end_time : date('H:i', strtotime('18:00'))?>" title="<?php echo __('End Time Setting', 'kboard-cross-calendar')?>">
			<label><br>이용요금<input type="text" name="kboard_option_price" value="<?php echo $content->option->content?>" readonly>
		</div>
	</div>
</div>

그리고 날짜선택기에서 선택한 날짜와 이용요금 그리고 시간선택창을 작성하고나면 ㅠㅠ 나중에 쓴글화면에 셋다 나오지가 않습니다 .. 이유가 무엇일까요 ?

 

감사합니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    1. 날짜 계산 관련해서는 구글에 jQuery 날짜 계산 키워드로 검색해보시면

    참고해보실 만한 자료가 많습니다.

    해당 자료들을 참고하셔서 활용해보시겠어요?

     

    2. 올려주신 코드로 저희 쪽에서 테스트해보니 날짜 및 시간 쪽 값은 정상적으로 저장 및 표시되고 있습니다.

    이용요금 쪽은 코드를 잘못 수정하신 듯합니다.

    올려주신 코드 중 아래의 코드를

    <?php echo $content->option->content?>

    아래의 코드로 교체해서 확인해보시겠어요?

    <?php echo $content->option->price?>

    고맙습니다.

  • 현재 이렇게 시간도 같이 넣으면 날짜와 시간이 차이날 수 있도록 했는데요 .. ㅠㅠ

     

    인도일자 // 5월 7일 오후 1시 선택 

    인수일자 // 5월 10일 오후 3시 선택   ==== 시간까지 선택되면 총 4일이니 4일요금인 36,000으로 들어가야됩니다

    1~3일까지는 3만원인데요  ㅜㅜ 이렇게 바꾸는게 맞는데변하지가 않네요 

     

    function kboard_set_date(){
    	var start_date = new Date(jQuery('#kboard_option_start_date').val());
    	var end_date = new Date(jQuery('#kboard_option_end_date').val());
    	var diff_date = (end_date.getTime() - start_date.getTime()) / (1000*60*60*24);
    	
    	var start_time = new Date(jQuery('#kboard_option_start_time').val());
    	var end_time = new Date(jQuery('#kboard_option_end_time').val());
    	var diff_time = (end_time.getTime() - start_time.getTime()) / (1000*60*60);
    	
    	var price = 0;
    	switch(diff_date){
    		case diff_date <= 3: price = 10000*diff_date; break;
    		case 4: price = 36000; break;
    		case 5: price = 45000; break;
    		default: price = 0; break;
    		
    	switch(diff_time){
    		case diff_time <= 3: price = 10000*diff_time; break;
    		case 4: price = 36000; break;
    		case 5: price = 45000; break;
    		default: price = 0; break;	
    	}

    이렇게 변경을 해서 넣어보기도 했는데 바뀌지가 않네요 .. ㅠㅠ 뭐가 문제일까요 ?

     

     

    그리고 말씀하신대로 요금코드부분을 수정을 했는데 그래도 날짜가 인도일시와 인수일시 날짜가 그리고 시간이 나오지 않습니다 ㅠㅜ 이유가 무엇일까요 ? 

  • 안녕하세요.

    kboard_set_date 함수가 실행될 때 각 변수에 어떤 값이 저장되는지 확인해보시겠어요?

    올려주신 코드 중 아래의 코드를 찾아서

    var diff_time = (end_time.getTime() - start_time.getTime()) / (1000*60*60);

    아래의 코드를 추가해보세요.

    console.log(start_date);
    console.log(end_date);
    console.log(diff_date);
    
    console.log(start_time);
    console.log(end_time);
    console.log(diff_time);

    위의 값은 크롬 브라우저의 개발자 도구(F12키) -> 콘솔(Console)에서 확인하실 수 있습니다.

    고맙습니다.

  • 답변 너무나도 감사드립니다. 말씀하신대로 코드를 넣어봤는데 그래도 적용이 되지않는 것 같네용 ㅠㅠ 

    function kboard_set_date(){
    	var start_date = new Date(jQuery('#kboard_option_start_date').val());
    	var end_date = new Date(jQuery('#kboard_option_end_date').val());
    	var diff_date = (end_date.getTime() - start_date.getTime()) / (1000*60*60*24);
    	
    	var start_time = new Date(jQuery('#kboard_option_start_time').val());
    	var end_time = new Date(jQuery('#kboard_option_end_time').val());
    	var diff_time = (end_time.getTime() - start_time.getTime()) / (1000*60*60);
    	console.log(start_date);
        console.log(end_date);
        console.log(diff_date);
    
        console.log(start_time);
        console.log(end_time);
        console.log(diff_time);
    	
    	var price = 0;
    	switch(diff_date){
    		case diff_date <= 3: price = 10000*diff_date; break;
    		case 4: price = 36000; break;
    		case 5: price = 45000; break;
    		default: price = 0; break;
    		
    	switch(diff_time){
    		case diff_time <= 3: price = 10000*diff_time; break;
    		case 4: price = 36000; break;
    		case 5: price = 45000; break;
    		default: price = 0; break;	
    	}

    혹시   diff_time   코드부분  current_time   으로 바꿔야 되는 부분일까요 ? 아니면 밑에 switch(diff_time)   부분을 약간 변형을 해야될까요 ?

    아니면 

    else{
    		if(indoor_outdoor == '제1여객터미널실내'){
    			// 제1여객터미널실내 기준 가격
    			switch(diff_date){
    			switch(diff_time){	
    				case 1: price = 45000; break;
    				case 2: price = 45000; break;
    				case 3: price = 45000; break;
    				case 4: price = 60000; break;
    				case 5: price = 75000; break;
    				case 6: price = 85000; break;
    				case 7: price = 95000; break;
    				case 8: price = 105000; break;
    				case 9: price = 115000; break;
    				case 10: price = 125000; break;
    				case 11: price = 135000; break;
    				case 12: price = 145000; break;
    				case 13: price = 155000; break;
    				case 14: price = 165000; break;
    				case 15: price = 175000; break;
    				case 16: price = 185000; break;
    				case 17: price = 195000; break;
    				case 18: price = 205000; break;
    				case 19: price = 215000; break;
    				case 20: price = 225000; break;
    				case 21: price = 235000; break;
    				case 22: price = 245000; break;
    				case 23: price = 255000; break;
    				case 24: price = 265000; break;
    				case 25: price = 275000; break;
    				case 26: price = 285000; break;
    				case 27: price = 295000; break;
    				case 28: price = 305000; break;
    				case 29: price = 315000; break;
    				case 30: price = 325000; break;
    				default: price = 0; break;
    			}
    		}
    		else if(indoor_outdoor == '제1여객터미널실외'){
    			// 제1여객터미널실외 기준 가격
    			switch(diff_date){
    			switch(diff_time){	
    				case 1: price = 30000; break;
    				case 2: price = 30000; break;
    				case 3: price = 30000; break;
    				case 4: price = 36000; break;
    				case 5: price = 45000; break;
    				case 6: price = 50000; break;
    				case 7: price = 55000; break;
    				case 8: price = 60000; break;
    				case 9: price = 65000; break;
    				case 10: price = 70000; break;
    				case 11: price = 75000; break;
    				case 12: price = 80000; break;
    				case 13: price = 85000; break;
    				case 14: price = 90000; break;
    				case 15: price = 95000; break;
    				case 16: price = 100000; break;
    				case 17: price = 105000; break;
    				case 18: price = 110000; break;
    				case 19: price = 115000; break;
    				case 20: price = 120000; break;
    				case 21: price = 125000; break;
    				case 22: price = 130000; break;
    				case 23: price = 135000; break;
    				case 24: price = 140000; break;
    				case 25: price = 145000; break;
    				case 26: price = 150000; break;
    				case 27: price = 155000; break;
    				case 28: price = 160000; break;
    				case 29: price = 165000; break;
    				case 30: price = 170000; break;
    				default: price = 0; break;
    			}
    		}
    		else if(indoor_outdoor == '제2여객터미널실외'){
    			// 제2여객터미널실외 기준 가격
    			switch(diff_date){
    			switch(diff_time){	
    				case 1: price = 40000; break;
    				case 2: price = 40000; break;
    				case 3: price = 40000; break;
    				case 4: price = 46000; break;
    				case 5: price = 55000; break;
    				case 6: price = 60000; break;
    				case 7: price = 65000; break;
    				case 8: price = 70000; break;
    				case 9: price = 75000; break;
    				case 10: price = 80000; break;
    				case 11: price = 85000; break;
    				case 12: price = 90000; break;
    				case 13: price = 95000; break;
    				case 14: price = 100000; break;
    				case 15: price = 105000; break;
    				case 16: price = 110000; break;
    				case 17: price = 115000; break;
    				case 18: price = 120000; break;
    				case 19: price = 125000; break;
    				case 20: price = 130000; break;
    				case 21: price = 135000; break;
    				case 22: price = 140000; break;
    				case 23: price = 145000; break;
    				case 24: price = 150000; break;
    				case 25: price = 155000; break;
    				case 26: price = 160000; break;
    				case 27: price = 165000; break;
    				case 28: price = 170000; break;
    				case 29: price = 175000; break;
    				case 30: price = 180000; break;
    				default: price = 0; break;
    			}
    		}
    		else{
    			// 제2여객터미널실내 기준 가격
    			switch(diff_date){
    			switch(diff_time){	
    				case 1: price = 55000; break;
    				case 2: price = 55000; break;
    				case 3: price = 55000; break;
    				case 4: price = 75000; break;
    				case 5: price = 85000; break;
    				case 6: price = 95000; break;
    				case 7: price = 105000; break;
    				case 8: price = 115000; break;
    				case 9: price = 125000; break;
    				case 10: price = 135000; break;
    				case 11: price = 145000; break;
    				case 12: price = 155000; break;
    				case 13: price = 165000; break;
    				case 14: price = 175000; break;
    				case 15: price = 185000; break;
    				case 16: price = 195000; break;
    				case 17: price = 205000; break;
    				case 18: price = 215000; break;
    				case 19: price = 225000; break;
    				case 20: price = 235000; break;
    				case 21: price = 245000; break;
    				case 22: price = 255000; break;
    				case 23: price = 265000; break;
    				case 24: price = 275000; break;
    				case 25: price = 285000; break;
    				case 26: price = 295000; break;
    				case 27: price = 305000; break;
    				case 28: price = 315000; break;
    				case 29: price = 325000; break;
    				case 30: price = 335000; break;
    				default: price = 0; break;
    			}
    		}
    		jQuery('input[name="kboard_option_price"]').val(price);
    	}
    }

    원래             switch(diff_date){   만 있는 이부분에 (diff_time){   도 추가를 해봤습니다 .. 여기다가도 뭘 추가해야 작동이 될 것 같은데ㅠ 그래도 코드가 작동이 되지를 않네요 

  • console.log 코드는 각 변수에 어떠한 값이 들어있는지

    확인하기 위해 안내해드렸기 때문에 해결이 되진 않습니다.

    자바스크립트 코드로 프로그래밍할 땐 console.log로 각 변수에 어떤 값이 있는지 확인해보셔야 합니다.

     

    console.log에 대한 자세한 내용은

    아래의 링크를 참고해보세요.

    https://developer.mozilla.org/ko/docs/Web/API/Console/log

     

    올려주신 코드 중 아래의 코드는 수정이 필요할 듯합니다.

    switch(diff_date){
    	case diff_date <= 3: price = 10000*diff_date; break;
    	case 4: price = 36000; break;
    	case 5: price = 45000; break;
    	default: price = 0; break;
    	
    switch(diff_time){
    	case diff_time <= 3: price = 10000*diff_time; break;
    	case 4: price = 36000; break;
    	case 5: price = 45000; break;
    	default: price = 0; break;	
    }

    kboard_set_date 함수가 실행될 때 위의 switch문이 2번 실행되며

    결과적으로는 아래의 switch문의 결과가 price 변수에 입력됩니다.

     

    저희가 커뮤니티에서 모든 코드를 만들어 드리는 건

    현실적으로 불가능하기 때문에 명확한 답변을 드리지 못하는 점 이해 부탁드립니다.

    고맙습니다.

  • 답변 감사합니다 참고하여서 코드를 수정해봤습니다 

    var startDate = new Date("2019-05-07 13:00:00");
    var endDate = new Date("2019-05-10 15:00:00");
    var diffDate = Math.ceil((endDate.getTime() - startDate.getTime()) /  (1000 * 60 * 60 * 24));
    console.log(diffDate); // 결과는 4

    하지만 아직까지 호환이 되지는 않더라고요 ㅠㅜ 

     

    --- 2. 모바일 화면에서는 datepicker 가 호환이 되지 않던데 아예 나오지가 않으며 수정도 안됩니다 ㅠㅠ 이것은 왜이러는걸까요 ??

    --- 3. 그리고 처음에 물어본 글 작성된 화면에 인도일시, 인수일시, 인도시간, 인수시간 , 요금 이 나오지 않는 부분-- 요금코드부분을 수정을 했는데 그래도 날짜가 인도일시, 인수일시, 인도시간, 인수시간 , 요금  이 나오지 않습니다 ㅠㅜ 이유가 무엇일까요 ? 

  • 올려주신 페이지 주소로 확인해보니

    모바일뿐만 아니라 PC 화면에서도 datepicker가 정상적으로 동작하지 않고 있습니다.

    크롬 브라우저 개발자 도구(F12) Console창을 확인해보면

    "Uncaught SyntaxError: missing ) after argument list" 에러 메시지를 표시하고 있습니다.

     

    해당 에러 메시지는 아래 코드 문제로 표시되고 있습니다.

    var diff_time = Math.ceil((end_time.getTime() - start_time.getTime()) / (1000*60*60);

    아래의 코드로 교체해서 확인해보시겠어요?

    var diff_time = Math.ceil((end_time.getTime() - start_time.getTime()) / (1000*60*60));

     

    KBoard 플러그인에서 추가한 입력 필드의 값이 제대로 표시되지 않는다면

    아래 링크를 참고해서 코드를 사이트 맞게 수정해보시겠어요?

    워드프레스 게시판 KBoard(케이보드) 새로운 입력 필드 추가 방법 (커스터마이징)

    고맙습니다.

  • 말씀하신대로 수정했습니다 그런데도 모바일에는 datepicker가 정상적으로 동작하지 않고 있습니다. ㅠㅠㅠ ㅜㅜ 이유가 무엇일까요 ..  ㅠ 

  • 코드를 잘못 수정하신 듯합니다.

    해당 페이지에서 크롬 개발자 도구 Console 창에

    SyntaxError: Unexpected end of input 메시지가 표시되고 있습니다.

    위 문구는 문법 오류입니다.

     

    추가하신 kboard_set_date 함수 쪽에서

    아래의 코드를 찾아서

    switch(diff_date){
    	case diff_date <= 3: price = 10000*diff_date; break;
    	case 4: price = 36000; break;
    	case 5: price = 45000; break;
    	default: price = 0; break;

    아래의 코드로 교체해서 확인해보시겠어요?

    switch(diff_date){
    	case diff_date <= 3: price = 10000*diff_date; break;
    	case 4: price = 36000; break;
    	case 5: price = 45000; break;
    	default: price = 0; break;
    }

     

    현재 PC에서도 정상적으로 동작하지 않고 있습니다.

    PC에서 크롬 브라우저 개발자 도구(F12)에서 Console 창을 확인해보시면

    자바스크립트 에러 메시지를 확인해보실 수 있습니다.

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기