다음 주소창을 이용한 주소 입력/datepicker를 통한 날짜입력

1. 다음주소창API

 

# 다음 우편번호 서비스를 사용하는 이유

- Key 발급 필요 x
- 기업, 상업용이든 뭐든 무조건 무료로 사용 가능
- 행정안전부에서 제공하는 주소 DB를 직접 업데이트

 

# 코드

# 다음 스크립트를 로딩한다.
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
html 파일이나 jsp 파일의 상단에 작성한다.


# 코드로 Form:input이나 input태그로 기본틀을 만들어준다.

# 자바스크립트로 onclick 으로 넘어오는 메소드를 만들어준다.

 

<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 
<script type="text/javascript">
    //다음 우편번호 검색
    function openHomeSearch(){
        new daum.Postcode({
            oncomplete:function(data){
                //input type="text" name=""안에 우편번호,주소,상세주소를 기입한다.
                $('[name=postno]').val(data.zonecode);
                $('[name=addr]').val(data.address);
                $('[name=detAddr]').val(data.buildingName);
            }
        }).open();
    }

 

이런식으로 자바스크립트를 만들면 name이 각각 postno,addr,detAddr인 input type="text"나
form:input path=""안으로 주소를 입력시 각각 값이 들어가게 된다.

---

# 결과

 

See the Pen 다음 우편번호 사용 by hambugman (@hambugman) on CodePen.

---

 

2. Datepicker

 

# 코드

jqueryui에서 기본적으로 제공하는 스크립트이며, 선택시 달력형태로 날짜를 지정하는 방식이다.
이는 MM/dd/yyyy (월/일/년)으로 출력된다. 
Datepicker를 사용하기위해선 아래의 태그를 넣어주어야한다.

 

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

 

 

---

 

 

# 결과

 

See the Pen Untitled by hambugman (@hambugman) on CodePen.