[API] lightpick 달력 라이브러리(1)

lightpick은 달력에서 날짜를 선택할 수 있는 라이브러리입니다. 

보통은 달력 라이브러리로 datepicker를 많이 사용하는데 저는 많은 기능이 필요하지 않아서 lightpick을 사용했습니다.

현재는 lightpick이 종료되고 easypick으로 변경된 것 같은데 저는 기록용으로 남겨놓겠습니다.ㅎㅎ?
아마 lightpick은 날짜 관련 라이브러리 moment를 사용하는데 더이상 moment가 업데이트 되지 않기 때문에 프로젝트를 종료한 것 같습니다. 뇌피셜입니다.
들어가보니 lightpick과 사용방법은 비슷한 것 같습니다.
https://easepick.com/

easepick

 

 

---

 

제가 프로젝트에서 구현하려고 했던 기능은 
예약 날짜 범위를 선택하는 기능과 이미 예약된 날의 범위를 제한하는 기능입니다.

 

1. 우선 라이트 픽을 사용하려면 https://wakirin.github.io/Lightpick/ 에서 라이트픽을 다운 받아야 합니다. 

2. 프로젝트에 lightpick을 옮기고 불러옵니다.

<!-- 라이트 픽 css -->
<link rel = "stylesheet" href = "/resources/include/calendar/css/lightpick.css" >
<!-- 라이트 픽 js -->
<script src = "/resources/include/calendar/js/lightpick.js" ></script>

 

3.  html 중 달력을 넣고 싶은 부분에 코드를 추가합니다. 

<div id="dateDiv" class="text-center">
    <input type="hidden" id="date" name="Date"> 
</div>

 

4. 자바스크립트에 lightpick을 추가합니다. 

<script type="text/javascript">
    var picker = new Lightpick({ 
    	field: document.getElementById('date')
    });
</script>

field를 본인이 작성한 input으로 선택하면 그 위치에 달력이 생성됩니다.

 

5. 그 외의 유용한 옵션입니다.

<script type="text/javascript">
    var picker = new Lightpick({ 
    	field: document.getElementById('date'),
        lang: 'ko' 				// 언어 한국어로 변경
        inline : true, 				// input을 누르지 않아도 달력이 항상 표시됨.
        minDate: moment().startOf('day'),	// 선택할 수 있는 가장 빠른 날을 오늘로 설정
        minDays : 2,				// 최소로 선택해야하는 일수 (하루 선택X, 최소 이틀 선택)
        maxDays : 7, 				// 최대 선택할 수 있는 일수
        format: 'YYYY-MM-DD',			// 기본 날짜 양식
		onSelect: function(date){ 	// 날짜를 선택했을 때의 콜백 함수
			let day = date.format('YYYY-MM-DD');
        }
    });
</script>

이렇게 하면 하루를 선택할 수 있습니다.

 

범위를 설정하고 싶으신 분들은 singleDate 를 false로 변경해주시면 됩니다. 

var picker = new Lightpick({
                field: document.getElementById('date'),
                inline : true,
                lang: 'ko',
                singleDate: false,		// 여러 날짜 선택 가능
                minDate: moment().startOf('day'),
                minDays : 2,
                maxDays : 7, 				
                format: 'YYYY-MM-DD',
                onSelect: function(start, end){
			let startDate = start.format('YYYY-MM-DD');
			let endDate = end.format('YYYY-MM-DD');
                }

 

다음은 lightpick으로 이미 예약된 날짜 막기~~!!

https://truthz-z.tistory.com/31

[API] lightpick 달력 라이브러리(2)