본문에 코드를 올려주실 땐 반드시 에디터의 "코드 스니펫 삽입" 기능으로 삽입해주세요. 

그렇지 않으면 코드가 이상해져서 에러 나는 코드로 바뀌거나,

질의응답 시 의사소통에 오해와 문제가 생길 수도 있습니다.

텍스트와 라디오 버튼을 필수로 설정하시려면 required 속성을 적용해보시겠어요?

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

<input type="text" id="kboard_option_tel" name="kboard_option_tel" value="<?php echo $content->option->tel?>">
<input type="radio" name="kboard_option_inquiry_type" value="실외"<?php if($content->option->inquiry_type == '실외'):?> checked<?php endif?>>

아래의 코드로 각각 교체해보세요.

<input type="text" id="kboard_option_tel" name="kboard_option_tel" value="<?php echo $content->option->tel?>" required>
<input type="radio" name="kboard_option_inquiry_type" value="실외"<?php if($content->option->inquiry_type == '실외'):?> checked<?php endif?> required>

KBoard 플러그인에서 워드프레스에서 지원하는 datepicker를 사용하실 수 있습니다.

날짜 선택 및 요금 계산 필드를 추가하시려면 아래의 방법을 참고해보세요.

FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/editor.php 파일에

아래의 코드를 추가해보세요. (입력 필드 추가)

<?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">날짜</label>
	<div class="attr-value">
		<label>시작일<input type="text" class="datepicker" id="kboard_option_start_date" name="kboard_option_start_date" onchange="kboard_set_date(this.value)" value="<?php echo $content->option->start_date ? $content->option->start_date : (isset($ymd) ? $ymd : $today)?>" title="<?php echo __('Start Date Setting', 'kboard-cross-calendar')?>" readonly></label>
		<label>종료일<input type="text" class="datepicker" id="kboard_option_end_date" name="kboard_option_end_date" onchange="kboard_set_date(this.value)" value="<?php echo $content->option->end_date ? $content->option->end_date : (isset($ymd) ? $ymd : $today)?>" title="<?php echo __('End Date Setting', 'kboard-cross-calendar')?>" readonly></label>
		결과<input type="text" name="kboard_option_price" value="<?php echo $content->option->content?>" readonly>
	</div>
</div>

editor.php 파일 제일 하단에 아래의 코드를 추가해보세요.

<?php
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-flick-style', KBOARD_URL_PATH.'/template/css/jquery-ui.css', array(), '1.12.1');
?>

/wp-content/plugins/kboard/skin/사용중인스킨/script.js 파일 제일 하단에

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

jQuery(document).ready(function(){
	jQuery('.datepicker').datepicker({
		closeText : '닫기',
		prevText : '이전달',
		nextText : '다음달',
		currentText : '오늘',
		monthNames : [ '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월' ],
		dayNames : [ '일', '월', '화', '수', '목', '금', '토' ],
		dayNamesShort : [ '일', '월', '화', '수', '목', '금', '토' ],
		dayNamesMin : [ '일', '월', '화', '수', '목', '금', '토' ],
		weekHeader : 'Wk',
		dateFormat : 'yy-mm-dd',
		firstDay : 0,
		isRTL : false,
		duration : 0,
		showAnim : 'show',
		showMonthAfterYear : true,
		yearSuffix : '년'
	});
});

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 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;
	}
	jQuery('input[name="kboard_option_price"]').val(price);
}

위의 코드를 적용하시면 날짜 차이가 0~3일 난다면 10000 * 일수 이런 식으로 계산됩니다.

4일이라면 36000원으로 표시되며 5일이라면 45000원으로 표시됩니다.

위의 코드는 예제 코드이기 때문에 원하시는 대로 레이아웃 및 로직을 수정하시려면

HTML, CSS, jQuery에 대해서 어느 정도 알고 계셔야 할 듯합니다.

고맙습니다.