Litepicker 사용하여 일정등록하기

Chris·2023년 3월 10일

DatePicker는 국내에서 잘 알려져 있어 이미 사용법이 다양하게 나와있지만 아직까진 국내에서 Litepicker는 알려지지 않은 것 같아서 간단하게 사용법을 소개합니다.

Html과 JavaScript에서 사용하는 방법

1) 설치

CDN

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

위의 CDN을 복사하여 <head>안에 붙여넣어 줍니다.

2) 일정을 선택하고 보여줄 공간을 만든다.

<input id="litepicker" placeholder="이곳을 클릭하여 일정을 선택하세요">

일정을 직접 입력하는 것이 아니기 때문에 type="text" 속성은 지워줍니다. 만약, 부트스트랩을 활용하고 있다면, class를 추가하셔도 무방합니다.

3) `<script>`를 정의한다.

<script>
  const picker = new Litepicker({ 
    element: document.getElementById('litepicker') 
  });
</script>

이 <script>의 위치는 <input> 아래에 둡니다.

⭐ Litepicker는 id를 통해 함수를 구분합니다.

출력 결과

그 외의 다양한 Litepicker 달력들

<script>
    //총 4가지 모양의 달력.
    window.addEventListener('DOMContentLoaded', event => {

    const litepickerSingleDate = document.getElementById('litepickerSingleDate');
    if (litepickerSingleDate) {
    new Litepicker({
    element: litepickerSingleDate,
    format: 'YYYY-MM-DD'
});
}

    const litepickerDateRange = document.getElementById('litepickerDateRange');
    if (litepickerDateRange) {
    new Litepicker({
    element: litepickerDateRange,
    singleMode: false,
    format: 'MMM DD, YYYY'
});
}

    const litepickerDateRange2Months = document.getElementById('litepickerDateRange2Months');
    if (litepickerDateRange2Months) {
    new Litepicker({
    element: litepickerDateRange2Months,
    singleMode: false,
    numberOfMonths: 2,
    numberOfColumns: 2,
    format: 'MMM DD, YYYY'
});
}

    const litepickerRangePlugin = document.getElementById('litepickerRangePlugin');
    if (litepickerRangePlugin) {
    new Litepicker({
    element: litepickerRangePlugin,
    startDate: new Date(),
    endDate: new Date(),
    singleMode: false,
    numberOfMonths: 2,
    numberOfColumns: 2,
    format: 'MMM DD, YYYY',
    plugins: ['ranges']
});
}
});

</script>