Date 선택 폼 라이브러리

부트스트랩과 같은 프레임워크를 사용하는 이유는

간편하기 때문이다.

 

하지만 달력기능을 사용하기 위해서

CSS프레임워크 전체를 설치하는 것 또한 낭비가 된다. 

 

https://github.com/lamplightdev/aeon#examples

lamplightdev/aeon

 

Aeon은 달력기능만 활용하고자 할 때

간단하게 사용할 수 있는 경량 js라이브러리(5kb)다.

 

 

---

사용법

<script src="https://unpkg.com/@lamplightdev/aeon"></script>

 

위의 CDN코드를 붙여넣고,

아래 코드를 입력하기만 하면 달력이 완성된다.

 

<label for="date">Start date</label>

<aeon-datepicker>
  <input type="date" id="date" name="date" value="2020-03-20" />
</aeon-datepicker>

<aeon-datepicker>
  <input type="date" id="date" name="date" value="2020-03-20" />
  <input type="time" id="time" name="time" value="05:19" />
</aeon-datepicker>

 

---

구현

 

Start date

 

 

나머지는 input태그의 value값을 받는 것으로

사용자가 선택한 달력의 값을 구현할 수 있다.