bootstrap 달력 사용 > jquery

• 목록

1. 사이트 접속
    https://github.com/uxsolutions/bootstrap-datepicker

    CDN 으로 접속시
    https://cdnjs.com/libraries/bootstrap-datepicker
    https://cdnjs.com/libraries/bootstrap

2. 파일 다운로드
    /js/bootstrap-datepicker.js
    /dist/css/bootstrap-datepicker.min.css
3.
<!-- datepicker 는 jquery 1.7.1 이상 bootstrap 2.0.4 이상 버전이 필요함 -->
<!-- jQuery가 먼저 로드 된 후 datepicker가 로드 되어야함.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="bootstrap-datepicker.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js" integrity="sha512-8Y8eGK92dzouwpROIppwr+0kPauu0qqtnzZZNEF8Pat5tuRNJxJXCkbQfJ0HlUG3y1HB3z18CSKmUo7i2zcPpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="bootstrap-datepicker.js"></script>


<div>
    <input type="text" name="ser_date_s" id="ser_date_s" style="text-align:center;" size="12" maxlength="10" value="<?=$ser_date_s;?>" />
    ~ <input type="text" name="ser_date_e" id="ser_date_e" style="text-align:center;" size="12" maxlength="10" value="<?=$ser_date_e;?>" />
</div>

<script>
    $(function() {    
        $('#ser_date_s, #ser_date_e').datepicker({
            format: "yyyy-mm-dd",    //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
            startDate: '-10d',    //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
            endDate: '+10d',    //달력에서 선택 할 수 있는 가장 느린 날짜. 이후로 선택 불가 ( d : 일 m : 달 y : 년 w : 주)
            autoclose : true,    //사용자가 날짜를 클릭하면 자동 캘린더가 닫히는 옵션
            calendarWeeks : false, //캘린더 옆에 몇 주차인지 보여주는 옵션 기본값 false 보여주려면 true
            clearBtn : false, //날짜 선택한 값 초기화 해주는 버튼 보여주는 옵션 기본값 false 보여주려면 true
            datesDisabled : ['2019-06-24','2019-06-26'],//선택 불가능한 일 설정 하는 배열 위에 있는 format 과 형식이 같아야함.
            daysOfWeekDisabled : [0,6],    //선택 불가능한 요일 설정 0 : 일요일 ~ 6 : 토요일
            daysOfWeekHighlighted : [3], //강조 되어야 하는 요일 설정
            disableTouchKeyboard : false,    //모바일에서 플러그인 작동 여부 기본값 false 가 작동 true가 작동 안함.
            immediateUpdates: false,    //사용자가 보는 화면으로 바로바로 날짜를 변경할지 여부 기본값 :false
            multidate : false, //여러 날짜 선택할 수 있게 하는 옵션 기본값 :false
            multidateSeparator :",", //여러 날짜를 선택했을 때 사이에 나타나는 글짜 2019-05-01,2019-06-01
            templates : {
                leftArrow: '&laquo;',
                rightArrow: '&raquo;'
            }, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징
            showWeekDays : true ,// 위에 요일 보여주는 옵션 기본값 : true
            title: "테스트",    //캘린더 상단에 보여주는 타이틀
            todayHighlight : true ,    //오늘 날짜에 하이라이팅 기능 기본값 :false
            toggleActive : true,    //이미 선택된 날짜 선택하면 기본값 : false인경우 그대로 유지 true인 경우 날짜 삭제
            weekStart : 0 ,//달력 시작 요일 선택하는 것 기본값은 0인 일요일
            language : "ko"    //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
            
        });//datepicker end
    });//ready end
    
    // 기본 이벤트 감지 메소드는 아래와 같은 형태이다

    $('#datePicker').datepicker({
        format: "yyyy-mm-dd",    //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
        startDate: '-10d',    //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
        ... //생략
        language : "ko"    //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
        //여기까지가 기본 사용 방법            
    
    }).on(show, function(e) {
         //이벤트의 종류
         //show : datePicker가 보이는 순간 호출
         //hide : datePicker가 숨겨지는 순간 호출
         //clearDate: clear 버튼 누르면 호출
         //changeDate : 사용자가 클릭해서 날짜가 변경되면 호출 (개인적으로 가장 많이 사용함)
         //changeMonth : 월이 변경되면 호출
         //changeYear : 년이 변경되는 호출
         //changeCentury : 한 세기가 변경되면 호출 ex) 20세기에서 21세기가 되는 순간
        
         console.log(e);// 찍어보면 event 객체가 나온다.
         //간혹 e 객체에서 date 를 추출해야 하는 경우가 있는데
         // e.date를 찍어보면 Thu Jun 27 2019 00:00:00 GMT+0900 (한국 표준시)
         // 위와 같은 형태로 보인다.
         // 추후에 yyyy-mm-dd 형태로 변경하는 코드를 업로드 하겠습니다.
    }
</script>