코스모스팜 스레드

생년월일 필드를 어떻게 만드나요?

wp-members 의 생년월일 필드가 그냥 text로 되어있어서 본인이 직접 숫자를 입력해야하는데 이게 상당히 불편해서..

예컨데 년/월/일 순으로 년 앞의 숫자를 클릭하면 1999,1998.... 이런식으로 쭉 드롭다운으로 만들고 월 앞이 숫자를 클릭하면 12,11,10... 이렇게 하거나

아니면 달력 방식으로 하게하던지 뭔가 개선 방법이 없는건가요? 생년월일 적게끔 하는데 너무 불편하네요

이 페이지의 내용이 유익하시나요? 혹은 더 많은 답변을 받길 원하시면 이 페이지를 공유 해보시는건 어떨까요?

내 홈페이지에 소셜 공유 버튼 추가하기

코스모스팜 회원관리
코스모스팜 회원관리
  • 안녕하세요~^^

    회원가입 필드에 달력을 추가하시려면 jQuery datepicker를 이용하시면 될 듯합니다.

    KBoard 플러그인이 설치되어 있다면

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

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

    add_filter('wpmem_register_form_rows', 'my_register_form_rows_filter', 10, 2);
    function my_register_form_rows_filter($rows, $toggle){
    	$meta_key = '메타키';
    	wp_enqueue_style('jquery-flick-style', KBOARD_URL_PATH.'/template/css/jquery-ui.css', array(), '1.12.1');
    	wp_enqueue_script('jquery-ui-datepicker');
    	?>
    	<script>
    	jQuery(document).ready(function(){
    		jQuery("#<?php echo $meta_key?>").datepicker({
    			dateFormat: "yy년mm월dd일"
    		});
    	});
    	</script>
    	<?php 
    	return $rows;
    }

    위 코드에서 메타키 부분을 실제 사용 중인 필드의 Meta Key 값으로 변경해주세요.

    Meta Key 값은 WP- Members 플러그인의 필드 관리 페이지에서 확인할 수 있습니다.

    KBoard 플러그인이 설치되어 있지 않다면 달력의 스타일이 제대로 표시되지 않을 수도 있습니다.

    추후 코스모스팜 회원관리 플러그인에서 기본으로 제공할 수 있는지 연구해보겠습니다.

     

    jQuery datepicker에 대한 자세한 내용은

    아래의 링크를 참고해보시겠어요?

    http://api.jqueryui.com/datepicker/

    고맙습니다.

  • css 에 추가하려니 마크업은 CSS에서 허용되지 않습니다. 라는 문구가 나와서 허용이 안되는데 어떻게 해야하나요

  • 워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에 추가해보시겠어요?

    고맙습니다.

  • 해봤는데 달력이 불편하게 되어있네요 예컨데 올해 년도만 되어있고 년도별로 선택이 불가능하고  월일 선택도 잘 안되어있고...

  • datepicker에서 년도와 월을 select box로 변경할 수 있게 하시려면

    아래의 코드를

    dateFormat: "yy년mm월dd일"

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

    dateFormat: "yy년mm월dd일",
    changeMonth: true,
    changeYear: true

    고맙습니다.

  • 년도 선택의 범위를 더 확장할 수 없을까요? 예컨데 2018년도에 찍혀있으면 가장 위에 2008년까지로 되어있고 밑에는 2028년까지로 되어있네요 밑의 범위를 줄이고 위의 범위를 늘리는 식으로는 어려울까요

  • 아래의 코드로 교체해보시겠어요?

    dateFormat: "yy년mm월dd일",
    changeMonth: true,
    changeYear: true,
    yearRange: "1950:2018"

    자세한 내용은 아래의 링크를 참고해주세요.

    http://api.jqueryui.com/datepicker/#option-yearRange

    고맙습니다.

코스모스팜 회원관리