개발/FRONT

[JS] Jquery Input 태그에서 달력 가져오기 datepicker

Hdev&Shoes 2023. 1. 2. 21:50
728x90

 

Jquery UI에서 제공하는 기능 중, 

 

datepicker 라는 달력 모듈을 제공하고 있다

 

Input 태그를 이용해서, 클릭했을 때 사용자가 선택할 수 있게끔 달력을 가져오는 예제다

 

 

아래 링크에서 Jquery UI CDN을 받아서 

script 태그를 삽입해주면 된다

https://releases.jquery.com/ui/

 

jQuery UI – All Versions | jQuery CDN

jQuery UI – All Versions jQuery UI - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery UI 1.13 jQuery UI 1.13.2 - uncompressed, minified Themes base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-ch

releases.jquery.com

 

 

아래부터 소스코드

 

<HTML>

<div class="container">
  <p>datepicker example</p>
<form>
Date:
<input id="datepicker">
</form>
</div>

 

<JS>

 

 $(function() {
$( "#datepicker" ).datepicker();
});

 

<CSS>

 

.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ddd;
}

 

 

datepicker id 값을 가진 Input 태그를 클릭했을 떄,

다음과 같은 이미지가 나오면 끝

728x90