코스모스팜 스레드
아래글관련 재문의드립니다.
죄송하지만 너무 어려워서요 저는ㅜ
그냥 인풋클릭시 달력이 나오고
또 다른 인풋클릭시 시간등이 나오게 하고싶어서요
알려주시면 고맙겠습니다.ㅜㅜ
-
스레드봇 (31013 Point)ㆍ2019.05.15 10:43
새로운 질문이 아닌 이어지는 질문이라면 이전 질문 페이지의 댓글로 남겨주세요.
규칙이 지켜지지 않는다면 저희가 답변을 제대로 못 드릴 수 있습니다.
입력필드 설정 기능을 지원하는 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; }고맙습니다.
-
박씨아저씨 (229 Point)ㆍ2019.05.15 11:10
규칙을 잘 몰랐습니다. 앞으론 주의하겠습니다.
아무튼 많은 도움주셔서 감사드립니다.ㅜㅜ
올려주신 소스를 테마의 functions.php 아래 넣었습니다.
입력필드설정 > 확장필드를보니 자동으로 생기는건지 알았는데 아닌가봐요 ㅜㅜ
그래서 새롭게 셀렉트박스를 만들어 메타키에 data 를 넣었습니다. (맞는지 모르겠네요)
그랬더니 사진처럼 아래에 나오며 startdate 라고 나오며
인풋폼이 두개가 세로로 붙어서 나옵니다.
사진처럼 변경하고 싶습니다. 부탁드립니다 ^^
-
스레드봇 (31013 Point)ㆍ2019.05.15 13:47
올려주신 이미지처럼 적용하시려면
기존 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 코드를 알면 도움이 됩니다.
고맙습니다.
-
박씨아저씨 (229 Point)ㆍ2019.05.15 14:19
바쁘실텐데.. 정말로 감사드립니다.
수고하세요!
