jQuery UI Datepicker만들기

jQuery UI는 개발 초심자에게 다양한 위젯을 제공하여 개발을 편리하게 하는 툴로

오늘은 Datepicker를 설치하는 법에 대해 알아보도록 하자.

일단 맨 처음 jQuery UI를 검색하자

이런페이지가 보일텐데 영어라고 겁먹지말고

다운로드 메뉴를 클릭하자

일단 우리는 최신 jQuery를 이용할거니깐 1.12.1 버전을 선택하고

모든 컨포넌트를 사용하면 용량이 크니까 toggle All 의 체크를 풀어준다.

아래쪽으로 내려가면 Widgets 섹션의 Datepicker에 체크해준다.

이렇게 체크해주면 이 모듈을 실행하기 위해서 필요한 나머지 모듈들이 자동으로 선택된다.

확인하고 싶다면 상단의 Core 섹션의 Keycode가 자동으로 선택된 것을 확인할 수 있다.

CSS 테마를 선택할 수도 있겠지만 지금은 테스트만 하는 거니까 그냥 Base로 선택하고 Download 버튼을 클릭하자

ZIP 파일이 다운로드 될거다.

압축을 풀면 위처럼 파일들이 생겨날 거고.

여기에서 필요한 파일들만 챙겨서 프로젝트 폴더를 하나 만들어 옮겨넣자.

난 css폴더와 js폴더로 나눠서 방금 받은 파일들 중 필요한 파일들을 정리해넣었다.

여기에서 빼먹은게 있다면 jQuery 파일이다.

jQuery UI는 jQuery를 이용해 만든 위젯 라이브러리다.

기본적으로 jQuery가 없다면 동작하지 않는다.

그래서 jQuery 파일을 다운받아 넣어준다.

http://jquery.com/download/ 에 가면 다운로드 받을 수 있다.

index.html 파일을 만들어서 위와같이 코딩하자.

index.html 파일을 브라우저에서 확인해보면 위와같은 화면을 확인할 수 있을것이다.