Javascript özelliği datepicker seçildiğinde HTML değeri kaldırıldı

Question

Bir tarih seçebileceğiniz bir Bootstrap modelim var. Arka planda, formla birlikte gönderilen gizli alanlar da doldurulur.

Sorun, datepicker öğesini seçtiğinizde, gizli değeri bazı garip nedenlerden (ancak yalnızca Javascript tarafından doldurulan gizli değerler) kaldırır.

Datepicker JS:

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

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

Gizli alan doldurmamak JS:

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

Gizli HTML öğesi:

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

Modal kutusu ilk olarak açıldığında, gizli değer alanının dolduğunu görebilirim, ancak datepicker'u tıklattığımda kaldırılır. Bu neden?

Answer 1

Sorun, önyükleme tarih seçicisi açıldığında show.bs.modal'un işten atılmasıdır. Dolayısıyla, show.bs.modal modelinin #request_iddeğerini ayarlaması gerekir. Etkinliği tetikleyen öğeyi elde etmenin bir yolu, işleyicinizin içinde e.target.id değerini kontrol etmektir. Burada

çalışan bir örneği: .val ile

$('#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

Güvenilir Bootstrap-datepicker'u kullanın. Aynı şeyi kullanıyorsanız ve $ ajax çağrısı yapıyorsanız, form değerlerinizi listeleyerek $ ajax() yaparken ekstra değerleri önleyin.