[Datepicker] 시작일 종료일 설정하기

Datepicker에서 기간을 검색시 시작일, 종료일에 대해 설정해보도록 하겠습니다.

 

아래는 jsp 부분입니다.

<div class="row">
  <div class="input-group">
    <input type="text" id="startDt" class="form-control datepicker startDt" placeholder="시작날짜" name="startDt">
      <label class="input-group-text" for="startDt" ><i class="fa-solid fa-calendar" ></i></label>
  </div>
  <div class="text-center"  style="font-size: x-large;">~ </div>
  <div class="input-group">
    <input type="text" id="endDt" class="form-control datepicker endDt" placeholder="종료날짜"  name="endDt">
      <label class="input-group-text" for="endDt" ><i class="fa-solid fa-calendar" ></i></label>
  </div>            
</div>

 

아래는 시작일 종료일 설정입니다.

    $(".startDt").datepicker().on('changeDate', function (selected) {
        var startDt = new Date(selected.date.valueOf());
        $('.endDt').datepicker('setStartDate', startDt);
    }).on('clearDate', function (selected) {
        $('.endDt').datepicker('setStartDate', null);
    });
    
    $(".endDt").datepicker().on('changeDate', function (selected) {
        var endDt = new Date(selected.date.valueOf());
        $('.startDt').datepicker('setEndDate', endDt);
    }).on('clearDate', function (selected) {
        $('.startDt').datepicker('setEndDate', null);
    });

 

이렇게 되면 시작일 설정시 종료일은 시작일 이전 선택불가,

 

종료일 설정시 시작일은 종료일 이후 선택불가가 됩니다.

 

감사합니다.