[ JS ] 날짜 라이브러리 적용하기

2024. 6. 12. 18:20ㆍ· FRONT-END/└ JS

환경 : Visual Studio Code

 

 

Lightpick : https://wakirin.github.io/Lightpick/

 현재 서비스 지원이 안되는 듯 하다... 

 

실행 결과

 

[ 주요 코드 ]

        $(function(){
            //기본 생성 코드
            var picker1 = new Lightpick({
                field: document.querySelector("[name=test1]"),
            });

            //날짜 형식 다르게
            var picker2 = new Lightpick({
                // field : document.querySelector("[name=test2]")
                field : $("[name=test2]")[0],
                format: "YYYY-MM-DD",
            });

         (+) picker1 :  기본적으로 지원하는 라이브러리 형태

         (+) picker2 :  날짜 형식을 수정하여 출력. jQuery형태로도 필드를 불러올 수 있음

            //한 화면에 두 개의 달이 출력되도록 설정
            var picker3 = new Lightpick({
                field : $("[name=test3]")[0],
                format : "YYYY-MM-DD",
                numberOfMonths: 2, //표시할 총 달의 개수
                numberOfColumns: 2, //한 줄에 표시할 달의 개수
            });

         (+) picker3 : 2개의 달이 한 화면에 보여지도록 설정

                   └ numberOfMonths : 표시할 총 달의 개수

                   └ numberOfColumns : 한 줄에 표시할 달의 개수

            //날짜를 범위로 설정 (data range pick)
            var picker4 = new Lightpick({
                field : $("[name=test4]")[0], //첫 번째 필드
                secondField : $("[name=test5]")[0], //두 번째 필드
                singleDate : false, //단일 날짜 선택 불가(범위 선택 가능)
                format : "YYYY-MM-DD",
                numberOfMonths: 2,
                numberOfColumns: 2,
            });

            //날짜 범위 제한
            var picker6 = new Lightpick({
                field : $("[name=test6]")[0], 
                secondField : $("[name=test7]")[0], 
                singleDate : false,
                format : "YYYY-MM-DD",
                numberOfMonths: 2,
                numberOfColumns: 2,
                selectForward : true, //날짜를 앞으로만 선택 가능하도록
                //minDate: '2024-03-11',//선택 가능한 최소 날짜
                //maxDate: '2024-03-22',//선택 가능한 최대 날짜

                // minDate: new Date(),//오늘부터

                //moment() - 현재날짜
                //moment(날짜) - 해당날짜
                minDate : moment(), //현재시각
                maxDate : moment().add(10, 'days'), //열흘 뒤
            });

         (+) picker4-5 : 기간을 선택할 수 있도록 필드를 두 개 받는다

                      └ singleDate : false 로 하여 단일 날짜는 선택하지 못하도록 막음

         (+) picker6-7 : 선택할 수 있는 날짜 범위를 구체화함. (주석 참고)

                      └ moment() : 현재 날짜

                      └ moment(날짜) : 해당 날짜

                      └ add(10, 'days') : 열흘 뒤

            //선택 불가능한 날짜 지정하기
            var picker8 = new Lightpick({
                field : $("[name=test8]")[0],
                secondField : $("[name=test9]")[0],
                singleDate: false,
                format : "YYYY-MM-DD",
                numberOfMonths: 2,
                numberOfColumns: 2,
                disableDates:[//선택 불가 일자 추가
                    '2024-03-01',
                    '2024-04-10',
                    '2024-05-05',
                ],
                lang: 'en', //언어설정(없으면 시스템 설정을 따름)
            });

         (+) picker8-9 : 선택 불가능한 날짜를 추가 (disableDates) 및 언어 설정 (lang)

[ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- lightpick CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightpick@1.6.2/css/lightpick.min.css">
    <script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightpick@1.6.2/lightpick.min.js"></script>

    <style>

    </style>

    <!-- jquery cdn -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <!-- 내가 만든 스크립트 추가(jQuery를 사용했으니 jQuery CDN 아래 작성) -->
    <script src="commons.js"></script>
    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
        $(function(){
            //기본 생성 코드
            var picker1 = new Lightpick({
                field: document.querySelector("[name=test1]"),
            });

            //날짜 형식 다르게
            var picker2 = new Lightpick({
                // field : document.querySelector("[name=test2]")
                field : $("[name=test2]")[0],
                format: "YYYY-MM-DD",
            });

            //한 화면에 세 개의 달이 출력되도록 설정
            var picker3 = new Lightpick({
                field : $("[name=test3]")[0],
                format : "YYYY-MM-DD",
                numberOfMonths: 2, //표시할 총 달의 개수
                numberOfColumns: 2, //한 줄에 표시할 달의 개수
            });

            //날짜를 범위로 설정 (data range pick)
            var picker4 = new Lightpick({
                field : $("[name=test4]")[0], //첫 번째 필드
                secondField : $("[name=test5]")[0], //두 번째 필드
                singleDate : false, //단일 날짜 선택 불가(범위 선택 가능)
                format : "YYYY-MM-DD",
                numberOfMonths: 2,
                numberOfColumns: 2,
            });

            //날짜 범위 제한
            var picker6 = new Lightpick({
                field : $("[name=test6]")[0], 
                secondField : $("[name=test7]")[0], 
                singleDate : false,
                format : "YYYY-MM-DD",
                numberOfMonths: 2,
                numberOfColumns: 2,
                selectForward : true, //날짜를 앞으로만 선택 가능하도록
                //minDate: '2024-03-11',//선택 가능한 최소 날짜
                //maxDate: '2024-03-22',//선택 가능한 최대 날짜

                // minDate: new Date(),//오늘부터

                //moment() - 현재날짜
                //moment(날짜) - 해당날짜
                minDate : moment(), //현재시각
                maxDate : moment().add(10, 'days'), //열흘 뒤
            });

            //선택 불가능한 날짜 지정하기
            var picker8 = new Lightpick({
                field : $("[name=test8]")[0],
                secondField : $("[name=test9]")[0],
                singleDate: false,
                format : "YYYY-MM-DD",
                numberOfMonths: 2,
                numberOfColumns: 2,
                disableDates:[//선택 불가 일자 추가
                    '2024-03-01',
                    '2024-04-10',
                    '2024-05-05',
                ],
                lang: 'en', //언어설정(없으면 시스템 설정을 따름)
            });
        });
    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h1>Datepicker(LightpickJS)</h1>
        </div>

        <div class="cell">
            <h2>기본 선택창</h2>
        </div>
        <div class="cell">
            <input type="text" name="test1" class="tool w-100">
        </div>

        <div class="cell">
            <h2>날짜 형식을 다르게</h2>
        </div>
        <div class="cell">
            <input type="text" name="test2" class="tool w-100">
        </div>

        <div class="cell">
            <h2>여러 개의 달이 한 화면에 출력</h2>
        </div>
        <div class="cell">
            <input type="text" name="test3" class="tool w-100">
        </div>

        <div class="cell">
            <h2>날짜 범위 선택</h2>
        </div>
        <div class="cell flex-cell">
            <input type="text" name="test4" class="tool w-50">
            <input type="text" name="test5" class="tool w-50">
        </div>

        <div class="cell">
            <h2>날짜 범위 제한</h2>
        </div>
        <div class="cell flex-cell">
            <input type="text" name="test6" class="tool w-50">
            <input type="text" name="test7" class="tool w-50">
        </div>

        <div class="cell">
            <h2>선택이 불가능한 날짜</h2>
        </div>
        <div class="cell flex-cell">
            <input type="text" name="test8" class="tool w-50">
            <input type="text" name="test9" class="tool w-50">
        </div>
    </div>

   

</body>
</html>

 

 

 

 

 

개인 공부 기록용입니다:)

728x90

'· FRONT-END > └ JS' 카테고리의 다른 글

[ JavaScript ] 이벤트: onBlur, onChange, onClick, onFocus, onSelect, onSubmt  (0) 2024.06.15
[ JS ] 이미지 슬라이더 라이브러리 적용하기  (0) 2024.06.13
[ JS ] DOM 제어  (0) 2024.06.08
[ JS ] 카카오 주소 API 적용 해보기  (0) 2024.06.07
[ JS / Java ] JS와 Java 비교  (0) 2024.06.06

관련글

티스토리툴바