코스모스팜 스레드

아래글관련 재문의드립니다.

죄송하지만 너무 어려워서요 저는ㅜ

그냥 인풋클릭시 달력이 나오고 

또 다른 인풋클릭시 시간등이 나오게 하고싶어서요 

알려주시면 고맙겠습니다.ㅜㅜ

무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
  • 새로운 질문이 아닌 이어지는 질문이라면 이전 질문 페이지의 댓글로 남겨주세요.

    규칙이 지켜지지 않는다면 저희가 답변을 제대로 못 드릴 수 있습니다.

     

    입력필드 설정 기능을 지원하는 KBoard 게시판 스킨에서

    날짜 및 시간 필드를 추가하는 예제 코드를 작성해봤습니다.

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_filter('kboard_skin_fields', 'my_kboard_skin_fields', 10, 2);
    function my_kboard_skin_fields($fields, $board){
    	if($board->id == '1'){ // 실제 적용될 게시판 ID 값으로 변경해주세요.
    		
    		if(!isset($fields['date'])){
    			$fields['date'] = array(
    				'field_type' => 'date',
    				'field_label' => '날짜',
    				'class' => 'kboard-attr-text',
    				'hidden' => '',
    				'meta_key' => '',
    				'field_name' => '',
    				'permission' => '',
    				'roles' => '',
    				'default_value' => '',
    				'placeholder' => '',
    				'required' => '',
    				'show_document' => '',
    				'description' => '',
    				'close_button' => 'yes'
    			);
    		}
    	}
    	
    	return $fields;
    }
    
    add_filter('kboard_get_template_field_html', 'my_kboard_get_template_field_html', 10, 4);
    function my_kboard_get_template_field_html($field_html, $field, $content, $board){
    	
    	if($field['field_type'] == 'date'){
    		wp_enqueue_script('jquery-ui-datepicker');
    		wp_enqueue_script('jquery-timepicker', KBOARD_URL_PATH . '/template/js/jquery.timepicker.js', array(), KBOARD_VERSION);
    		wp_enqueue_style('jquery-flick-style', KBOARD_URL_PATH.'/template/css/jquery-ui.css', array(), '1.12.1');
    		wp_enqueue_style('jquery-timepicker', KBOARD_URL_PATH.'/template/css/jquery.timepicker.css', array(), KBOARD_VERSION);
    		
    		ob_start();
    		?>
    		<div class="kboard-attr-row">
    			<label class="attr-name" for="kboard_option_start_date"><?php echo __('Start date', 'kboard-cross-calendar')?></label>
    			<div class="attr-value">
    				<div class="calendar-event-start-date-set">
    					<input type="text" class="datepicker" id="kboard_option_date" name="kboard_option_date" value="<?php echo $content->option->date?>" title="날짜" readonly>
    					<input type="text" class="timepicker" name="kboard_option_time" maxlength="5" value="<?php echo $content->option->time?>" title="시간">
    				</div>
    			</div>
    		</div>
    		<script>
    		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 : '년'
    			});
    
    			jQuery('.timepicker').timepicker({'timeFormat':'H:i'});
    		});
    		</script>
    		<?php
    		$field_html = ob_get_clean();
    	}
    	
    	return $field_html;
    }

    위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주세요.

     

    입력 필드 설정 중 게시글 본문에 표시 기능을 사용하고 날짜와 시간 모두 표시하시려면

    아래의 코드도 추가해보시겠어요?

    add_filter('kboard_document_add_option_value_field_html', 'my_kboard_document_add_option_value_field_html', 10, 4);
    function my_kboard_document_add_option_value_field_html($value_html, $field, $content, $board){
    	if($field['field_type'] == 'date'){
    		$value_html = sprintf('<div class="kboard-document-add-option-value meta-key-%s"><span class="option-name">%s</span> : %s</div><hr>', $field['field_type'], $field['field_name'], "{$content->option->date} {$content->option->time}");
    	}
    	
    	return $value_html;
    }

    고맙습니다.

  • 규칙을 잘 몰랐습니다. 앞으론 주의하겠습니다.

    아무튼 많은 도움주셔서 감사드립니다.ㅜㅜ

    올려주신 소스를 테마의 functions.php 아래 넣었습니다.

    입력필드설정 > 확장필드를보니 자동으로 생기는건지 알았는데 아닌가봐요 ㅜㅜ

    그래서 새롭게 셀렉트박스를 만들어 메타키에 data 를 넣었습니다. (맞는지 모르겠네요)

    그랬더니 사진처럼 아래에 나오며 startdate 라고 나오며 

    인풋폼이 두개가 세로로 붙어서 나옵니다.

    사진처럼 변경하고 싶습니다. 부탁드립니다 ^^

     

  • 올려주신 이미지처럼 적용하시려면

    기존 kboard_get_template_field_html 필터 쪽 코드를

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

    add_filter('kboard_get_template_field_html', 'my_kboard_get_template_field_html', 10, 4);
    function my_kboard_get_template_field_html($field_html, $field, $content, $board){
    	
    	if($field['field_type'] == 'date'){
    		wp_enqueue_script('jquery-ui-datepicker');
    		wp_enqueue_script('jquery-timepicker', KBOARD_URL_PATH . '/template/js/jquery.timepicker.js', array(), KBOARD_VERSION);
    		wp_enqueue_style('jquery-flick-style', KBOARD_URL_PATH.'/template/css/jquery-ui.css', array(), '1.12.1');
    		wp_enqueue_style('jquery-timepicker', KBOARD_URL_PATH.'/template/css/jquery.timepicker.css', array(), KBOARD_VERSION);
    		
    		ob_start();
    		?>
    		<div class="kboard-attr-row">
    			<label class="attr-name" for="kboard_option_date">예약날짜</label>
    			<div class="attr-value">
    				<div class="calendar-event-start-date-set">
    					<input type="text" class="datepicker" id="kboard_option_date" name="kboard_option_date" value="<?php echo $content->option->date?>" title="날짜" readonly>
    				</div>
    			</div>
    		</div>
    		<div class="kboard-attr-row">
    			<label class="attr-name" for="kboard_option_time">예약시간</label>
    			<div class="attr-value">
    				<div class="calendar-event-start-date-set">
    					<input type="text" class="timepicker" id="kboard_option_time" name="kboard_option_time" maxlength="5" value="<?php echo $content->option->time?>" title="시간">
    				</div>
    			</div>
    		</div>
    		<script>
    		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 : '년'
    			});
    
    			jQuery('.timepicker').timepicker({'timeFormat':'H:i'});
    		});
    		</script>
    		<?php
    		$field_html = ob_get_clean();
    	}
    	
    	return $field_html;
    }

     

    레이아웃을 원하시는 대로 편집하시려면 HTML과 CSS 코드를 알면 도움이 됩니다.

    고맙습니다.

  • 바쁘실텐데.. 정말로 감사드립니다.

    수고하세요!

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)