Javascript가 추가되었습니다. datepicker가 선택되면 HTML 값이 제거됩니다.

Question

날짜를 선택할 수있는 Bootstrap 모달이 있습니다. 백그라운드에서 양식과 함께 제출되는 숨겨진 필드가 채워집니다.

요소는 datepicker 요소를 선택하면 일부 이상한 이유로 숨겨진 값을 제거하지만 숨겨진 값은 자바 스크립트에 의해 채워집니다.

날짜 선택기 JS :

var date = new Date(); 
date.setDate(date.getDate()); 

$('#datepicker').datepicker({ 
    format: "dd/mm/yyyy", 
    startDate: date, 
    autoclose: true, 
}); 

숨겨진 필드 채우기 JS :

$(function() { 
    $('#appointment').on("show.bs.modal", function (e) { 
     $("#request_id").val($(e.relatedTarget).data('request-id')); 
    }); 
}); 

숨겨진 HTML 요소 :

<input type="hidden" name="request_id" id="request_id" value=""> 

모달 상자가 처음 나타 났을 때 숨겨진 값 필드가 채워지는 것을 볼 수 있지만 datepicker을 클릭하면 제거됩니다. 왜 이런거야?

Answer 1

문제는 부트 스트랩 datepicker가 열릴 때 show.bs.modal이 발생한다는 것입니다. 따라서 show.bs.modal이 모달 열림과 관련된 경우 #request_id 값 만으로 설정해야합니다. 이벤트를 발생시킨 요소를 가져 오는 데 사용할 수있는 한 가지 방법은 처리기 내에서 e.target.id 값을 확인하는 것입니다. 여기

작업 샘플 : .val와

$('#datepicker').datepicker({ 
 
    format: "dd/mm/yyyy", 
 
    startDate: new Date(), 
 
    autoclose: true, 
 
}); 
 

 
$(function() { 
 
    $('#appointment').on("show.bs.modal", function (e) { 
 
    if(e.target.id == 'appointment'){ 
 
     $("#request_id").val($(e.relatedTarget).data('request-id')); 
 
    } 
 
    }); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 

 

 
<input type="hidden" name="request_id" id="request_id" value=""> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#appointment" data-request-id="myExampleId"> 
 
    Open appointment modal 
 
</button> 
 

 
<div id="appointment" class='modal fade'> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
 
     <h4 class="modal-title">Title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
      <label for="datepicker">Date bootstrap</label> 
 
      <input type="text" id="datepicker"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

신뢰할 수있는 Bootstrap-datepicker을 사용하십시오. 같은 것을 사용하고 $ ajax를 호출하는 경우 양식 값을 나열하여 $ ajax()를 만드는 동안 추가 값을 방지하십시오.