lightpick은 달력에서 날짜를 선택할 수 있는 라이브러리입니다.
보통은 달력 라이브러리로 datepicker를 많이 사용하는데 저는 많은 기능이 필요하지 않아서 lightpick을 사용했습니다.
현재는 lightpick이 종료되고 easypick으로 변경된 것 같은데 저는 기록용으로 남겨놓겠습니다.ㅎㅎ?
아마 lightpick은 날짜 관련 라이브러리 moment를 사용하는데 더이상 moment가 업데이트 되지 않기 때문에 프로젝트를 종료한 것 같습니다. 뇌피셜입니다.
들어가보니 lightpick과 사용방법은 비슷한 것 같습니다.
https://easepick.com/
easepick
easepick.com
제가 프로젝트에서 구현하려고 했던 기능은
예약 날짜 범위를 선택하는 기능과 이미 예약된 날의 범위를 제한하는 기능입니다.
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)
lightpick 기본 사용법은 https://truthz-z.tistory.com/30 [API] lightpick 달력 라이브러리(1) lightpick은 달력에서 날짜를 선택할 수 있는 라이브러리입니다. 보통은 달력 라이브러리로 datepicker를 많이 사용하는
truthz-z.tistory.com
'코딩 > 개발' 카테고리의 다른 글
[API] lightpick 달력 라이브러리(2) (0) | 2023.11.29 |
---|---|
[웹에디터 API] 썸머노트 사용법 / Summernote (0) | 2023.08.13 |
[CSS] media query 반응형 웹 만들기 (0) | 2022.11.10 |
[아임포트 결제 API] 자바스크립트 / 카카오페이, 카드 결제 / 테스트 결제 (1) | 2022.10.06 |