부트스트랩 달력 특정일자 비활성화 하는 방법 bootstrap datepicker

부트스트랩 달력 특정일자 비활성화 하는 방법 bootstrap datepicker

 

 

부트스트랩에서 달력을 사용하다가 특정일자 비활성화를 해야하는 일이 생겼습니다. 다른 서비스에서는 여러 보긴 했지만 부트스트랩에서도 사용할 수 있는지 궁금했는데 찾아보니 비활성화 할 수 있는 방법이 있었습니다. 이번 글에서는 부트스트랩 달력에 특정일자를 비활성화 하는 방법에 대해 소개하겠습니다.

 

 

부트스트랩 달력 특정일자 비활성화 하는 방법

 

부트스트랩 달력을 커스텀하기 위해서는 datepicker를 활용해야 합니다. 활용하기 위해서는 bootstrap-datepicker 파일을 프로젝트 내에 추가한 후 사용해야 합니다.

 

GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs)

 

1. datepicker 관련 파일 다운로드 후 프로젝트에 추가

먼저 위의 페이지에 접속하면 나오는 깃허브 페이지에서 다운로드를 진행합니다. 다운로드 후  dist > js 에서 bootstrap-datepicker.js 와 dist > css에서 bootstrap-datepicker.css를 프로젝트에 추가합니다. 

 

달력의 한국어버전을 원한다면 dist > locals > bootstrap-datepicker.ko.min.js를 프로젝트에 추가합니다.

 

 

2. datepicker 파일로드

프로젝트 추가 후 파일 로드를 다음과 같이 진행합니다.

 

 

<!-- datepicker 는 jquery 1.7.1 이상 bootstrap 2.0.4 이상 버전이 필요함 -->
<!-- jQuery가 먼저 로드 된 후 datepicker가 로드 되어야함.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="resources/css/plugin/datepicker/bootstrap-datepicker.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="resources/js/plugin/datepicker/bootstrap-datepicker.js"></script>


<!--한국어  달력 쓰려면 추가 로드-->
<!-- <script src="resources/js/plugin/datepicker/bootstrap-datepicker.ko.min.js"></script> -->

 

 

3. 코드 적용하기

위 과정까지 진행하면 datepicker를 사용하기 위한 세팅이 완료 됩니다. 이제 다음과 같이 사용할 수 있습니다.

 

아래와 같은 input 태그를 생성합니다.

<div class="form-floating mb-4 d-flex">
<input type="text" class="datepicker_input form-control border-2" id="reservation-date" />
</div>

 

javascript 코드에 다음과 같이 설정합니다.

$("#reservation-date").datepicker({
  format: "yyyy-mm-dd", //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
  startDate: "-10d", //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
  datesDisabled: ["2023-12-16"], //선택 불가능한 일 설정 하는 배열 위에 있는 format 과 형식이 같아야함.
  autoclose: true,
  clearBtn: false,
  disableTouchKeyboard: false,
  language: "ko" //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
});

 

그러면 아래와 같은 달력을 만들 수 있게 됩니다.

 

 

 

위 속성 중 dateDisabled: ["2023-12-16"]을 설정하였는데 이 설정이 2023-12-16일을 제외하도록 지정한 것입니다. 그래서 달력에 12월 16일이 비활성화 된 것을 확인할 수 있습니다.

 

datepicker의 다른 속성

datepicker는 위 속성 외에 다양한 속성이 있습니다. 아래의 속성을 확인하여 다양하게 달력을 커스텀하시길 바랍니다.

 

 $("#reservation-date").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: ["2023-12-24", "2023-12-25"], //선택 불가능한 일 설정 하는 배열 위에 있는 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: "«",
      rightArrow: "»"
    }, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징
    showWeekDays: true, // 위에 요일 보여주는 옵션 기본값 : true
    title: "테스트", //캘린더 상단에 보여주는 타이틀
    todayHighlight: true, //오늘 날짜에 하이라이팅 기능 기본값 :false
    toggleActive: true, //이미 선택된 날짜 선택하면 기본값 : false인경우 그대로 유지 true인 경우 날짜 삭제
    weekStart: 0, //달력 시작 요일 선택하는 것 기본값은 0인 일요일
    language: "ko" //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
  }); //datepicker end

 

 

▼ 함께 보면 좋은 글 ▼

 

JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기

 

JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공