[Datepicker] Datepicker 추천(JQuery UI 아님)

by

Datepicker 란?

datepicker 는 쉽게 말해 날짜를 선택할때 사용하는 UI 라이브러리다.
흔히 JQuery UI 를 사용을 한다.

JQuery UI

흔히 사용하는 JQuery UI 는 디자인이 너무 별로이다.
그래서 다시 css를 커스텀 해줘야하는 번거러움이 있다.

추천하는 Datepicker

Datepicker 사이트로 이동

사이트로 이동하면 datepicker 의 샘플들을 볼 수 있다.

JQuery UI 보다는 깔끔한 편이여서 커스텀 없이도 그냥 쓰기에도 괜찮다.

사용방법

GitHub 사이트로 이동

Github 사이트로 이동하여 readme 를 보면 시작 방법이 써있다.

npm 을 이용해서 설치할 수도 있다.

npm install @chenfengyuan/datepicker

파일을 다운로드 받은 후 include 해서 사용해도 된다.

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/datepicker.css" rel="stylesheet">
<script src="/path/to/datepicker.js"></script>

path/to 는 자신의 경로에 맞게 수정해서 추가해준다.

이후 datepicker로 만들 input을 만들어준다.

<input type="text" id="startDate">

스크립트 단에 datepicker 가 생성되게 해주었고 setDate를 통해 현재 날짜가 들어가도록 설정하였다.

 $(document).ready(()=>{
     $('#startDate').datepicker(); // 생성
     $('#startDate').datepicker('setDate', new Date()); // 초기값 세팅
 })

여러가지 옵션들이 많으니 사이트에서 보고 사용해보면 된다.

Leave a Comment